/* 叮叮点歌 dingsong.ai 操作样稿⁠·音乐教室（2026-10-22）
   加载顺序：assets/ds/tokens.css → assets/ds/bundle.css → assets/shell.css → 这支。
   只用设计系统的 token：颜色 var(--…)、间距 var(--space-…)、圆角 var(--radius-…)；字级只用字级表里的值（后面注明是哪一级）。
   用到的组件：Keys（琴键）、FollowPanel（跟着弹的音轨语言）、Button、Chip、Segmented、Stepper、SectionHead、Toast。
   新组件（之后补进设计系统）：选曲卡、看谱的梯子、一行谱（标准简谱／大字简谱）、落下的色块、三步切换、长辈三选一、转横提示。 */

/* ---------- 文字＋箭头的链接：一律做成胶囊钮（照设计系统 .set-more：line-strong 外框、15px 粗体、44px 高；读者测试：红字加箭头不像按钮） ---------- */
.cl-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; white-space: nowrap; cursor: pointer; }   /* ui-label */
.cl-go:hover { border-color: var(--ink); }
button.cl-go:disabled { opacity: .35; cursor: not-allowed; }   /* “做成铃声”改用同一种胶囊钮（10-25 第 3 轮必修 6），正在做的时候停用要看得出来（照设计系统 .btn:disabled） */
.cl-go .gl { width: 1em; height: 1em; }
.cl-go-lg { font-size: 17px; padding-inline: var(--space-22); }   /* body：跟旁边的主按钮一样大 */
.cl-view[hidden] { display: none !important; }

/* =====================================================================
   选曲页
   ===================================================================== */
.cl-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-44); align-items: end; padding-block: var(--space-48) var(--space-28); }
.cl-kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }   /* kicker */
.cl-kick .mono { font-family: inherit; }
.cl-hero h1 { margin-top: var(--space-10); font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.cl-lead { margin-top: var(--space-14); max-width: 30em; font-size: 18px; color: var(--ink); }   /* lead-text：第一句讲这页能做什么，用主要文字色 */
.cl-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-top: var(--space-22); }
.cl-free { margin-top: var(--space-14); max-width: 32em; font-size: 16px; color: var(--ink-2); }   /* body-small */
.cl-how { list-style: none; margin: 0; padding: 0; display: grid; }
.cl-how li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: var(--space-14); row-gap: var(--space-4); align-items: baseline; padding-block: var(--space-14); border-top: 1px solid var(--line); }
.cl-how li:last-child { border-bottom: 1px solid var(--line); }
.cl-how-n { grid-row: span 2; font: 800 40px/1 var(--font-display); color: var(--red-ink); }   /* stat：步骤数字 */
.cl-how b { font: 700 22px/1.3 var(--font-body); }   /* item-title */
.cl-how li > span:last-child { font-size: 16px; color: var(--ink-2); }   /* body-small */

.cl-who-nav { border-block: 1px solid var(--line); }
.cl-who-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); padding-block: var(--space-12); }
.cl-who-q { margin-right: var(--space-6); font: 700 15px/1.25 var(--font-body); }   /* ui-label */

.cl-all { border-bottom: 1px solid var(--line); }   /* 全部曲子：不知道自己算哪一组的人，照歌名找 */
.cl-all-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); padding-block: var(--space-12); }
.cl-all-h { margin-right: var(--space-6); font: 700 15px/1.25 var(--font-body); }   /* ui-label：跟“谁要弹？”一样 */
.cl-all-list { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-10); margin: 0; padding: 0; list-style: none; }
.cl-group { padding-block: var(--space-48) var(--space-24); }
.cl-group + .cl-group { border-top: 1px solid var(--line); }
.cl-group-head { display: grid; gap: var(--space-6); margin-bottom: var(--space-24); max-width: 46em; }
.cl-group-head h2 { font: 700 40px/1.2 var(--font-body); letter-spacing: -.01em; }   /* section-title */
.cl-group-head p { color: var(--ink-2); }
.cl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-28) var(--space-26); }
.cl-card { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; padding-top: var(--space-14); border-top: 1px solid var(--line); }   /* 同一排的卡片，“先听／直接弹”对齐在最下面 */
.cl-card-lane { height: 56px; padding: var(--space-8) var(--space-10); border-radius: var(--radius-10); background: var(--glass); }   /* 小音轨：开头两句的高低（FollowPanel 的语言） */
.cl-card-lane svg { display: block; width: 100%; height: 100%; }
.cl-card-lane .blk { fill: var(--amber); }
.cl-card-t { margin-top: var(--space-6); font: 700 22px/1.3 var(--font-body); }   /* item-title */
.cl-card-t a { color: var(--ink); text-decoration: none; }
.cl-card-t a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cl-card-o { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
/* 名曲片段（10-25 网站主人定案）：曲名旁一个小标，跟曲名同一行放得下就同一行 */
.cl-part { display: inline-block; vertical-align: 0.2em; padding: 0 var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-pill); font: 400 14px/1.6 var(--font-body); color: var(--ink-2); }
.cs-part { width: fit-content; max-width: 100%; margin-top: var(--space-6); }   /* 宽度跟着字（10-26 第 4 轮评审必修 4：原本被撑成一整条空心长框，像没填的输入栏） */
.cs-part[hidden] { display: none; }
.cl-card-m, .cs-meta { font-size: 15px; color: var(--ink); }   /* ui-label 字级 */
.cl-card-s { font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
[data-cards="elder"] .cl-card-s, [data-cards="elder"] .cl-card-o { font-size: 17px; color: var(--ink); }   /* body：长辈那一组的说明用内文大小、主要文字色（读者测试 10-24：14px 灰字老花要瞇眼） */
.cl-more { display: none; margin-top: var(--space-18); }   /* 每一群先露几首，按了看全部：手机 2、平板 4、电脑 6（10-25 第 3 轮必修 8：平板、电脑原本 90 张全部摊开） */
@media (max-width: 640px) {
  .cl-cards--fold:not(.open) > li:nth-child(n+3) { display: none; }
  .cl-more { display: inline-flex; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .cl-cards--fold.cl-fold-mid:not(.open) > li:nth-child(n+5) { display: none; }
  .cl-fold-mid + .cl-more { display: inline-flex; }
}
@media (min-width: 1081px) {
  .cl-cards--fold.cl-fold-wide:not(.open) > li:nth-child(n+7) { display: none; }
  .cl-fold-wide + .cl-more { display: inline-flex; }
}
/* 同一首歌只在它的第一组出完整卡，其他组用一行字链接（10-25 第 3 轮必修 8：至少 8 首在两组各有一张卡） */
.cl-also-in { margin-top: var(--space-18); font-size: 15px; line-height: 1.8; color: var(--ink-2); }   /* ui-label 字级 */
.cl-also-in a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
/* “全部曲子”：依歌名找的框＋“列出全部”（默认不摊开 90 颗胶囊） */
.cl-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); flex: 1 1 20em; }
.cl-find { flex: 1 1 14em; min-width: 0; min-height: var(--tap-min); padding: 0 var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font: 400 16px/1.2 var(--font-body); }   /* body-small：16px 手机才不会自动放大 */
.cl-find::placeholder { color: var(--ink-2); }
.cl-find:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cl-all-in > .cl-all-list, .cl-all-in > .cl-find-none, .cl-all-in > .fine { flex-basis: 100%; }
.cl-all-list[hidden], .cl-all-list > li[hidden] { display: none; }
.cl-card-a { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: auto; padding-top: var(--space-6); }
/* 10-25 第 3 轮（网站主人授权照建议）：整张卡可点＝先听（曲名链接撑满整张卡），“直接弹”改一个文字链接；原本每张卡两颗胶囊钮 */
.cl-card { position: relative; }
.cl-card-main::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-10); }
.cl-card:hover { cursor: pointer; }
.cl-card:hover .cl-card-main { text-decoration: underline; text-underline-offset: 4px; }
.cl-card:has(.cl-card-main:focus-visible) { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: var(--radius-10); }
.cl-card-a { align-items: center; justify-content: space-between; }
.cl-card-hint { display: inline-flex; align-items: center; gap: var(--space-6); font: 700 15px/1.25 var(--font-body); color: var(--ink-2); }   /* ui-label：告诉读者点卡片会先听（不是按钮，点了一样是整张卡） */
.cl-card-hint .gl { width: 1em; height: 1em; }   /* 红色只给主按钮、录音、正在播：这里跟字同色 */
.cl-card-play { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--space-4); color: var(--ink); font: 700 15px/1.25 var(--font-body); text-decoration: underline; text-underline-offset: 4px; }   /* 叠在整张卡的链接上面，点得到 */
.cl-card-play:hover { text-decoration-thickness: 2px; }
.cl-btn { min-height: var(--tap-min); padding: 0 var(--space-18); font-size: 15px; }   /* 卡片上的空心按钮：跟旁边的胶囊钮一样高 */
.cl-lv { display: inline-flex; align-items: center; gap: var(--space-4); vertical-align: -0.15em; }
.cl-lv .gl { width: 1.05em; height: 1.05em; }
.cl-mine-act { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.cl-mine { list-style: none; margin: var(--space-18) 0 var(--space-14); padding: 0; display: grid; }
.cl-mine-i { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-18); padding-block: var(--space-12); border-top: 1px solid var(--line); }
.cl-mine-i:last-child { border-bottom: 1px solid var(--line); }
.cl-mine-t { display: grid; gap: var(--space-4); min-width: 0; }
.cl-mine-t b { font-size: 18px; }   /* lead-text 字级 */
.cl-mine-t span { font-size: 14px; color: var(--ink-2); }
.cl-mine-a { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.cl-noscript { padding-block: var(--space-24); }

/* =====================================================================
   一首歌
   ===================================================================== */
.cs > .wrap, .ce > .wrap { padding-block: var(--space-18) var(--space-48); }
.cs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); }   /* 分段切换：用 radiogroup 时选中的那格（设计系统用 aria-pressed） */
.seg button:hover:not([aria-checked="true"]):not([aria-pressed="true"]) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.seg button { min-height: var(--tap-min); }
.cs-head-row { margin-top: var(--space-14); }
.cs-head { display: grid; gap: var(--space-6); }
.cs-kick { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--ink-2); }   /* mono-label */
.cs-head h1 { font: 700 40px/1.15 var(--font-body); letter-spacing: -.01em; }   /* section-title：一首歌的页面是播放器，标题比各部分页名小一级 */
.cs-head h1:focus, .ce-head h1:focus { outline: none; }   /* 换画面时程序把焦点放到标题（读屏会念），不是可以按的东西 */
.cs-orig { color: var(--ink-2); }
.cs[data-who="elder"] .cs-orig { display: none; }   /* 长辈看到英文原名会以为选错歌：原名留在页脚的出处 */
.cs-teach { font-size: 15px; color: var(--ink); }   /* 老师上课：这首可以教什么 */
.cs-steps-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-18); }
@media (min-width: 901px) { .cs-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-24); } .cs-steps-row { margin-top: 0; } }
.cs-steps { display: inline-flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-pill); background: var(--panel); }   /* 三步：Segmented 的样子＋步骤数字 */
.cs-step { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--tap-min); padding: 0 var(--space-18) 0 var(--space-10); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 16px/1 var(--font-body); cursor: pointer; }   /* body-small 字级 */
.cs-step[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.cs-step:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cs-step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; font: 800 15px/1 var(--font-display); }
.cs-chain .gl { width: 18px; height: 18px; }

/* ---------- 长辈第一次三选一 ---------- */
.cs-pick { margin-top: var(--space-18); padding-block: var(--space-18); border-block: 1px solid var(--line); }
.cs-pick h2 { font: 700 26px/1.25 var(--font-body); }   /* program-title */
.cs-pick > .fine { margin-top: var(--space-4); }
.cs-pick-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); margin-top: var(--space-14); }
.cs-pick-o { display: grid; justify-items: center; align-content: start; gap: var(--space-6); min-height: 150px; padding: var(--space-18) var(--space-12); border: 0; border-radius: var(--radius-18); background: var(--glass); color: var(--glass-ink); box-shadow: inset 0 0 0 1.5px var(--glass-edge); font: inherit; text-align: center; cursor: pointer; }   /* 操作台的语言：深色面板＋glass-edge 内框 */
.cs-pick-o:hover { background: var(--glass-2); }
.cs-pick-o:focus-visible { outline-color: var(--red-ink); }
.cs-pick-big { font: 800 40px/1.1 var(--font-display); color: var(--amber); }   /* stat */
.cs-pick-o b { font: 700 22px/1.3 var(--font-body); }   /* item-title */
.cs-pick-o > span:last-child { font-size: 15px; color: var(--glass-text-2); }
.cs-pick-lit i { display: block; width: 34px; height: 44px; border-radius: 0 0 var(--radius-6) var(--radius-6); background: var(--key-white); box-shadow: inset 0 0 0 4px var(--red); position: relative; }
.cs-pick-lit i::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 9px; height: 9px; transform: translateX(-50%); border-radius: 50%; background: var(--amber); }

/* ---------- 舞台：深色操作台（Console）＝一行谱／落下的色块＋琴键 ---------- */
.cs-room { margin-top: var(--space-18); }
.cs-stage { position: relative; display: grid; gap: var(--space-12); margin-top: 0; padding: var(--space-14); overflow: hidden; }
[data-theme="dark"] .cl-view .console { box-shadow: inset 0 0 0 1.5px var(--glass-edge); }   /* 深色：深色琴台放在深色页底上只差约 1.09:1，加 glass-edge 内框才看得出边（10-25 评审品味建议） */
.cs-stars { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
.cs-star .gl { width: 30px; height: 30px; color: var(--glass-dim); }
.cs-star.got .gl { color: var(--amber); }
.cs-score { display: grid; align-content: start; gap: var(--space-10); min-height: 132px; }
.sc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6) var(--space-12); font: 500 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--glass-dim); }   /* mono-label */
.sc-key { color: var(--glass-ink); }
.cs-stage[data-who="elder"] .sc-head, .cs-stage[data-who="teacher"] .sc-head { font-size: 16px; }   /* 长辈、老师（投影）：第几句、1=C 也要看得到 */
.sc-nxt-k { align-self: center; margin-right: var(--space-10); font: 700 15px/1 var(--font-body); color: var(--glass-dim); }   /* “下一句”：只靠颜色分不出第二行是下一句还是换行 */
.cs-stage[data-who="elder"] .sc-nxt-k { font-size: 18px; }
.sc-hint { font-size: 18px; color: var(--glass-text-2); }
.sc-prog { display: flex; gap: var(--space-4); margin-top: var(--space-4); }
.sc-prog i { flex: 1; height: 4px; border-radius: var(--radius-2); background: var(--glass-rule); }
.sc-prog i.cur { background: var(--glass-dim); }
.sc-prog i.done { background: var(--amber); }
.sc-win { display: grid; align-content: start; gap: var(--space-10); }   /* 这一句＋下一句；手机上变成固定两行（横放一行）的谱框，见下面“手机直放”“手机横放”两段 */
.sc-line { --u: 1.05em; display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: var(--space-14); }
.sc-bar { display: inline-flex; flex-wrap: wrap; max-width: 100%; row-gap: var(--space-14); align-items: flex-end; align-self: stretch; }   /* 一小节一组：一句太长要换行时只在小节线后面换，不会只剩一个音掉到下一行；只有一小节本身比一整行还宽（手机 375 的《C 大调前奏曲》等）才在小节里面换行，不超出画面 */
.sc-cur { font: 700 40px/1.1 var(--font-body); color: var(--glass-ink); }   /* section-title 字级：一行谱的数字要大 */
.sc-nxt { font: 700 22px/1.1 var(--font-body); color: var(--glass-dim); }   /* item-title：下一句淡淡的预告 */
.sn, .sd { position: relative; display: inline-flex; align-items: baseline; padding: var(--space-6) var(--space-8) var(--space-12); border-radius: var(--radius-6); font-variant-numeric: tabular-nums; }
.sn b { position: relative; font-weight: 700; }
.sn.wide b { letter-spacing: -.01em; }
.sn .sa { align-self: flex-start; margin-right: var(--space-4); font-size: .5em; }   /* 升降记号：小一号、靠上 */
.sn .sdo { margin-left: var(--space-4); }
.sn.u1::after, .sn.u2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: currentColor; }   /* 简谱的底线：半拍一条、四分之一拍两条；相邻的会接成一条 */
.sn.u2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: currentColor; }
.sn.g { margin-left: var(--space-8); }   /* 换一拍：底线断开 */
.sn.o1 b::before, .sn.o2 b::before { content: ""; position: absolute; left: 50%; top: -.22em; width: .14em; height: .14em; transform: translateX(-50%); border-radius: 50%; background: currentColor; }   /* 高八度：上面一点 */
.sn.on1 b::after, .sn.on2 b::after { content: ""; position: absolute; left: 50%; bottom: -.3em; width: .14em; height: .14em; transform: translateX(-50%); border-radius: 50%; background: currentColor; }   /* 低八度：下面一点 */
.sn.rest b { opacity: .7; }
.sb { align-self: stretch; width: 2px; margin-inline: var(--space-8); background: var(--glass-dim); opacity: .7; }   /* 小节线 */
.sn.on, .sd.on { background: var(--amber); color: var(--on-amber); }   /* “亮起来”用 amber 的方块（方块对深色底亮度差很大，不只靠颜色）；不加底线：简谱的底线是“半拍” */
.sn.done, .sd.done { color: var(--glass-dim); }
.sn.hit, .sd.hit { color: var(--amber); }
.sn.on.hit { color: var(--on-amber); }
/* 大字简谱（小朋友、长辈）：只写字，长度用宽度＋下面一条长条表示 */
.sn.big { justify-content: flex-start; padding: var(--space-4) var(--space-4) var(--space-14); }
.sn.big::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 4px; height: 4px; border-radius: var(--radius-2); background: currentColor; opacity: .5; }   /* 还没弹到的长度条：对底色至少 3:1（图形） */
.sn.big.on::after { opacity: 1; }
.sn.big.on { transform: scale(1.12); transform-origin: 50% 100%; z-index: 1; }
.sn.big.on.r-last { transform-origin: 100% 100%; }   /* 一行最后一个音：往左长（class-song.js scoreEdges） */
.sn.big.on.r-first { transform-origin: 0 100%; }   /* 一行第一个音：往右长，琥珀底不被谱框左缘切掉（10-26 第 6 轮评审小事：长辈模式切 2～6px）；一行只有一个音时也照这条 */
.sn.big.w025 { width: calc(var(--u) * .5); } .sn.big.w05 { width: calc(var(--u) * .75); } .sn.big.w075 { width: calc(var(--u) * 1); } .sn.big.w1 { width: calc(var(--u) * 1.25); }
.sn.big.w15 { width: calc(var(--u) * 1.75); } .sn.big.w2 { width: calc(var(--u) * 2.25); } .sn.big.w25 { width: calc(var(--u) * 2.6); } .sn.big.w3 { width: calc(var(--u) * 3); } .sn.big.w35 { width: calc(var(--u) * 3.4); } .sn.big.w4 { width: calc(var(--u) * 3.75); }
.sn.big.w45 { width: calc(var(--u) * 4.1); } .sn.big.w5 { width: calc(var(--u) * 4.4); } .sn.big.w6 { width: calc(var(--u) * 5); }   /* 越长越慢变宽：6 拍不会比一行还宽 */
.sn.big { min-width: calc(.75em + var(--space-8)); }   /* 很短的音（十六分、休止）也至少放得下一个字，不叠在一起；长短另外看字下面的长度条 */
.sn.big.wide { min-width: 1.8em; }   /* 唱名、升降记号（Sol、#Sol）比数字宽 */
.sn.big.wide b { font-size: .8em; }
.cs-stage[data-style="big"] .sc-line { row-gap: var(--space-18); }
.cs-stage[data-who="elder"] .sc-cur { font-size: 52px; }   /* page-title 字级：长辈大字 */
.cs-stage[data-who="elder"] .sc-nxt { font-size: 26px; }
.cs-stage[data-who="teacher"] .sc-cur { font-size: 52px; }
.cs-stage[data-view="lights"] .cs-score, .cs-stage[data-view^="blocks"] .cs-score { min-height: 0; }
.cs-stage:not([data-view^="blocks"]) .cs-view .cs-lane { display: none; }
.cs-stage[data-who="kids"][data-view^="blocks"] .cs-score { display: none; }   /* 小朋友看色块时：进度看上面的星星就好 */
.cs-stage[data-view^="blocks"] .cs-keys { height: 200px; }
.cs-stage[data-view^="blocks"] .cs-lane { height: 140px; }
.cs-stage[data-who="elder"] .cs-keys { height: 200px; }   /* 长辈电脑版：大字谱两行＋琴键＋按钮，笔记本电脑（1280×800）一屏放得下 */
.cs-stage[data-who="teacher"] .cs-keys { height: 188px; }   /* 老师：多一行“这首可以教”，琴键矮一点，按钮才在第一屏 */

/* ---------- 琴键窗口：一条长琴键左右移（跟着旋律卷） ---------- */
.cs-view { position: relative; overflow: hidden; border-radius: var(--radius-10); }
.cs-strip { width: calc(var(--n, 8) / var(--vis, 8) * 100%); transform: translateX(calc(var(--off, 0) / var(--n, 8) * -100%)); transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.cs-strip.instant { transition: none; }
.cs-keys { height: 226px; }
.cs-keys .k-mark { visibility: hidden; width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--on-amber); }   /* 灯：琥珀色外面一圈深色（琥珀对白键只有 1.6～2.5:1，加圈才看得清楚） */
.cs-keys .k.next .k-mark { visibility: visible; }   /* 灯只亮在现在要弹的键 */
.cs-keys .k.on { box-shadow: inset 0 -8px 0 var(--on-amber); }   /* 正在响的键：琥珀底＋下缘一条深色，不只靠颜色（只看灯的时候，这是唯一的提示） */
.cs-keys .k.on.next { box-shadow: inset 0 0 0 4px var(--red), inset 0 -8px 0 var(--on-amber); }
.cs-keys .k.out { pointer-events: none; }
.cs-keys .k-black.out { visibility: hidden; }
.cs-keys .k-name { position: relative; font: 700 17px/1 var(--font-body); }   /* body 字级 */
.cs-keys .k-key { min-height: 1em; }   /* 10-25 第 2 轮必修 8：没有电脑字母的键（最右边）也留字母那一行，数字才在同一条在线 */
.cs-keys .k.is-wrong { outline: 3px dashed currentColor; outline-offset: -8px; }   /* 必修 1：刚按错的那一键（非红色；红框是“下一个”） */
.cs-keys .k-name.wide { font-size: 14px; }
.cs-keys .k-name.o1::before { content: ""; position: absolute; left: 50%; top: -7px; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }
.cs-keys .k-name.on1 { margin-bottom: var(--space-6); }   /* 低八度的点在字下面：跟键盘提示字母隔开 */
.cs-keys .k-name.on1::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }
.cs-stage[data-view="lights"] .k-name, .cs-stage[data-view="blocks"] .k-name { visibility: hidden; }
.cs-stage[data-who="kids"] .cs-keys .k-name { font-size: 22px; }
.cs-stage[data-who="elder"] .cs-keys .k-name { font-size: 26px; }
.cs-stage[data-who="elder"] .cs-keys .k-name.wide, .cs-stage[data-who="kids"] .cs-keys .k-name.wide { font-size: 18px; }

/* ---------- 换“铁琴”：琴键借录音室铁琴的外观（10-25 网站主人定案；原本规格写“音乐教室不套材质”）----------
   只读录音室的做法、用同一组 --material-* token（studio.css“铁琴（铝）”那段），录音室的文件不动：
   胡桃木框＋两条红毛毡、铝条（拉丝纹）、每条两颗铆钉、数字在象牙小牌上。亮灯照旧用琥珀（.on）、下一个照旧红框（.next）；键的位置、大小、数字基线都不变 */
.cs-stage[data-inst="glock"] .cs-view { 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); }
.cs-stage[data-inst="glock"] .cs-keys::before, .cs-stage[data-inst="glock"] .cs-keys::after { content: ""; position: absolute; left: 6px; right: 6px; 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); }   /* 两条红毛毡：铝条架在上面 */
.cs-stage[data-inst="glock"] .cs-keys::before { top: 22%; }
.cs-stage[data-inst="glock"] .cs-keys::after { top: 52%; }
.cs-stage[data-inst="glock"] .cs-keys .k-white { z-index: 1; width: calc(100% / var(--white) - 10px); margin-left: var(--space-5); border-radius: var(--radius-6); }
.cs-stage[data-inst="glock"] .cs-keys .k-black { z-index: 2; border-radius: var(--radius-6); }
.cs-stage[data-inst="glock"] .cs-keys .k:not(.on) { color: var(--material-bars-7); background: repeating-linear-gradient(0deg, var(--material-sheen-7) 0 1px, var(--material-shade-3p5) 1px 3px), 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%); background-color: var(--material-aluminium); }
.cs-stage[data-inst="glock"] .cs-keys .k-white:not(.on):not(.next) { 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); }
.cs-stage[data-inst="glock"] .cs-keys .k-black:not(.on):not(.next) { filter: brightness(.86); box-shadow: 0 0 0 2px var(--material-console), inset 0 1px 0 var(--material-sheen-50); }   /* 升降音那一排：暗一阶＋深色缝，跟下面那排分得开 */
.cs-stage[data-inst="glock"] .cs-keys .k-white::before, .cs-stage[data-inst="glock"] .cs-keys .k-white::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; transform: translateX(-50%); 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); }   /* 每条两颗铆钉（压在毛毡上） */
.cs-stage[data-inst="glock"] .cs-keys .k-white::before { top: 22%; }
.cs-stage[data-inst="glock"] .cs-keys .k-white::after { top: 52%; }
.cs-stage[data-inst="glock"] .cs-keys .k-name:not(:empty) { padding: var(--space-4) var(--space-6); border-radius: var(--radius-6); color: var(--material-bars-9); background: var(--material-ivory-plate); box-shadow: 0 1px 2px var(--material-shade-45); }   /* 数字放在象牙小牌上（铝上直接写字对比不够，录音室同一招） */
.cs-stage[data-inst="glock"] .cs-keys .k-key:not(:empty) { opacity: 1; color: var(--material-bars-8); background: var(--material-shade-66); border-radius: var(--radius-2); box-shadow: 0 0 0 3px var(--material-shade-66); }   /* 电脑字母：深色小底（用外圈撑开，不改高度，数字基线才不会跳） */
.cs-lane { position: relative; height: 180px; overflow: hidden; background-image: linear-gradient(90deg, var(--glass-rule) 1px, transparent 1px); background-size: calc(100% / var(--n, 8)) 100%; }
.cs-lane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--glass-red-line); }   /* 判定线＝播放线 */
.blk { position: absolute; top: 0; display: grid; justify-items: center; align-content: end; padding-bottom: var(--space-4); border-radius: var(--radius-6); background: var(--lane-next); color: var(--glass-ink); box-shadow: inset 0 0 0 3px var(--glass); will-change: transform; }
.blk[hidden] { display: none; }
.blk b { font: 700 17px/1 var(--font-body); }
.blk.wide b { font-size: 13px; }
.blk.next { background: var(--glass-red); color: var(--on-amber); }   /* 下一个要弹的 */
.blk.done, .blk.hit { background: var(--amber); color: var(--on-amber); }
.cs-stage[data-view="blocks"] .blk b { visibility: hidden; }
/* 小朋友：七个音七种颜色（跟 amber 一样亮、一样鲜艳，只换色相；不支持的浏览器全用 amber）＋位置本身就是答案 */
.cs-stage[data-who="kids"] .blk { background: var(--amber); color: var(--on-amber); }
/* 七个音的色相避开红色（红色只给“下一个要弹”、录音、正在播、主按钮；六页评审 10-24 必修：原本 Do＝色相 25 红橘）：橘→黄→绿→青→天蓝→蓝→紫 */
.cs-stage[data-who="kids"] { --note-1: oklch(from var(--amber) l c 50); --note-2: oklch(from var(--amber) l c 90); --note-3: oklch(from var(--amber) l c 135); --note-4: oklch(from var(--amber) l c 175); --note-5: oklch(from var(--amber) l c 215); --note-6: oklch(from var(--amber) l c 255); --note-7: oklch(from var(--amber) l c 300); }
.cs-stage[data-who="kids"] .blk.d1 { background: var(--note-1); }
.cs-stage[data-who="kids"] .blk.d2 { background: var(--note-2); }
.cs-stage[data-who="kids"] .blk.d3 { background: var(--note-3); }
.cs-stage[data-who="kids"] .blk.d4 { background: var(--note-4); }
.cs-stage[data-who="kids"] .blk.d5 { background: var(--note-5); }
.cs-stage[data-who="kids"] .blk.d6 { background: var(--note-6); }
.cs-stage[data-who="kids"] .blk.d7 { background: var(--note-7); }
.cs-stage[data-who="kids"] .blk.next { box-shadow: inset 0 0 0 3px var(--glass-ink); }
.cs-stage[data-who="kids"] .blk.done { opacity: .5; }

/* ---------- 预备拍、“很好”、转横提示 ---------- */
.cs-count { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: color-mix(in srgb, var(--glass) 62%, transparent); color: var(--glass-red-ink); font: 800 74px/1 var(--font-display); pointer-events: none; }   /* hero-title 字级 */
.cs-cheer { position: absolute; left: 0; right: 0; top: 28%; z-index: 3; text-align: center; color: var(--amber); font: 700 52px/1.2 var(--font-body); pointer-events: none; }   /* page-title 字级 */
.cs-shift { position: absolute; left: 50%; top: var(--space-8); z-index: 3; transform: translateX(-50%); padding: var(--space-6) var(--space-14); border-radius: var(--radius-pill); background: var(--glass-ink); color: var(--glass); font: 700 18px/1.3 var(--font-body); white-space: nowrap; pointer-events: none; }   /* 长辈：琴键往哪边移了（叠在琴键上缘的小牌子、点得穿，1.8 秒后收起） */
.cs-shift[hidden] { display: none; }
.cs-fs-title { display: none; }   /* 只在投影全屏幕时出现 */
.cs-turn { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: var(--space-12); padding: var(--space-18); background: var(--glass); color: var(--glass-ink); text-align: center; }
.cs-turn p { font-size: 17px; color: var(--glass-text-2); }
.cs-turn p b { display: block; margin-bottom: var(--space-4); font: 700 22px/1.3 var(--font-body); color: var(--glass-ink); }
.cs-turn .ic { width: 64px; height: 64px; }
.cs-turn-ok { color: var(--glass-ink); border-color: var(--glass-ink); }
.cs-turn-ok:hover { background: var(--glass-2); }

/* ---------- 提示句、弹完之后、四颗主要按钮 ---------- */
.cs-msg { min-height: 1.7em; margin-top: var(--space-12); font-size: 17px; color: var(--ink); }   /* body */
.cs-msg.is-miss { color: var(--red-ink); font-weight: 700; }   /* FollowPanel：弹错时红字粗体 1.5 秒（小朋友、长辈不用） */
.cs[data-who="elder"] .cs-msg { font-size: 22px; }   /* item-title 字级：长辈大字 */
.cs-next { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-10); }
.cs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin-top: var(--space-14); }
.cs-bar .btn { min-height: var(--tap-min); padding: 0 var(--space-22); }
.cs-tgl[aria-pressed="true"] { background: var(--amber); border-color: var(--ink); color: var(--on-amber); }   /* 开着的开关＝亮起来（Chip 的规则）；外框用墨色，跟全站选中的样子一样（shell.css 的 .chip[aria-pressed]：琥珀底对页面底只有 2.33:1，靠墨色外框看出开着；10-26 第 6 轮评审品味建议） */
.cs-pct { font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.cs-pct:empty { display: none; }
@media (min-width: 641px) {   /* 电脑、平板：“只听”放在四颗按钮那一列的右边 */
  .cs-room { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); align-items: center; }
  .cs-room > .cs-stage, .cs-room > .cs-msg, .cs-room > .cs-next { grid-column: 1 / -1; }
  .cs-room > .cs-bar { grid-column: 1; }
  .cs-room > .cs-chain { grid-column: 2; margin-top: var(--space-14); }
}
.cs-chain { min-height: var(--tap-min); padding: 0 var(--space-18); font-size: 15px; }
.cs[data-who="elder"] .cs-bar .btn { min-height: 56px; font-size: 18px; }

/* ---------- 看法与声音 ---------- */
.cs-more-btn { display: none; }
.cs-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: var(--space-18) var(--space-28); margin-top: var(--space-22); padding-top: var(--space-18); border-top: 1px solid var(--line); }
.cs-set { display: grid; align-content: start; gap: var(--space-8); }
.cs-set-l { font: 700 15px/1.25 var(--font-body); color: var(--ink); }   /* ui-label */
.cs-set .seg { justify-self: start; }
@media (min-width: 641px) { .cs-set-ladder { grid-column: span 2; } }   /* 看谱的梯子占两栏，四阶排成一排（设计评审 10-24：1280 宽“一行简谱”掉到第二排，往上爬的感觉不见了） */
/* 看谱的梯子（新组件）：四格一格比一格高的“阶梯”，往右一步多看一点谱 */
.cs-ladder { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.cs-ladder button { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--tap-min); padding: 0 var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 15px/1 var(--font-body); cursor: pointer; }
.cs-ladder button:hover { border-color: var(--ink); }
.cs-ladder button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cs-rung { display: block; width: 6px; border-radius: var(--radius-2); background: currentColor; }
.cs-ladder button:nth-child(1) .cs-rung { height: 5px; } .cs-ladder button:nth-child(2) .cs-rung { height: 9px; }
.cs-ladder button:nth-child(3) .cs-rung { height: 13px; } .cs-ladder button:nth-child(4) .cs-rung { height: 17px; }
.cs-checks { gap: var(--space-4); }
.cs-checks .field { align-items: center; min-height: var(--tap-min); color: var(--ink); }
.cs-checks input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.cs-stepper { display: inline-flex; align-items: center; gap: var(--space-10); }
.cs-stepper .num { min-width: 3.2em; text-align: center; font-size: 17px; }
.cs-stepper button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- 这首还可以（歌尾的桥） ---------- */
.cs-also { display: grid; gap: var(--space-12); margin-top: var(--space-48); padding-top: var(--space-24); border-top: 1px solid var(--line); }
.cs-also h2 { font: 700 26px/1.25 var(--font-body); }   /* program-title */
.cs-also-act { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.cs-also-act .btn { min-height: var(--tap-min); padding: 0 var(--space-18); font-size: 15px; }
.cs-also .fine { max-width: 46em; }
.cs-warn { display: grid; gap: var(--space-10); padding-block: var(--space-14); border-block: 2px solid var(--ink); }   /* 著作权提醒：只用粗线分开，不放底色框 */
.cs-warn p { font-size: 18px; }
.cs-warn-act { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.cs-warn-act .chip { min-height: var(--tap-min); padding-inline: var(--space-16); font-size: 15px; }
.cs-src { margin-top: var(--space-24); max-width: 52em; }
.cs-src a { color: var(--red-ink); text-underline-offset: 3px; }

/* =====================================================================
   自己写一首
   ===================================================================== */
.ce-head { display: grid; gap: var(--space-8); margin-top: var(--space-22); }
.ce-head h1 { font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.ce-head .lead { max-width: 36em; font-size: 18px; color: var(--ink-2); }
.ce-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16em, 20em); gap: var(--space-28) var(--space-44); align-items: start; margin-top: var(--space-24); }
.ce-fields { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-14) var(--space-22); }
.ce-f { display: grid; gap: var(--space-6); font: 700 15px/1.25 var(--font-body); }   /* ui-label */
.ce-f input[type="text"], .ce-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); }
.ce-f input[type="text"] { min-width: 14em; }
.ce-f input::placeholder { color: var(--ink-2); }
.ce-f select { min-height: var(--tap-min); }
.ce-own { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-14); margin: 0; padding: 0; border: 0; }
.ce-own legend { margin-bottom: var(--space-6); padding: 0; font: 700 15px/1.25 var(--font-body); }
.ce-own .field { min-height: var(--tap-min); color: var(--ink); }
.ce-own input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ink); }
.ce-preview { display: grid; align-content: start; gap: var(--space-8); min-height: 96px; margin-top: var(--space-18); padding: var(--space-14) var(--space-18); }
.ce-preview .sc-line { font: 700 26px/1.1 var(--font-body); color: var(--glass-ink); }   /* program-title 字级 */
.ce-pad { display: grid; gap: var(--space-10); margin-top: var(--space-14); }
.ce-digits { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-8); }
.ce-digits button { display: grid; place-content: center; gap: var(--space-4); min-height: 64px; border: 0; border-radius: var(--radius-12); background: var(--glass); color: var(--glass-ink); box-shadow: var(--shadow-bar), inset 0 0 0 1.5px var(--glass-edge); font: 700 30px/1 var(--font-body); cursor: pointer; }   /* freq-number 字级：大数字键 */
.ce-digits button small { font-size: 12px; font-weight: 400; color: var(--glass-text-2); }
.ce-digits button:hover { background: var(--glass-2); }
.ce-digits button:active { background: var(--amber); color: var(--on-amber); box-shadow: none; }
.ce-digits button:focus-visible { outline-color: var(--red-ink); }
.ce-mods { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.ce-mods .chip { min-height: var(--tap-min); padding-inline: var(--space-14); font-size: 15px; }
.ce-pad-why { margin-top: var(--space-4); }
.ce-kb { margin-top: var(--space-14); }
.ce-keys { height: 170px; }
.ce-keys .k-name { position: relative; font: 700 17px/1 var(--font-body); }
.ce-keys .k-name.o1::before { content: ""; position: absolute; left: 50%; top: -7px; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }
.ce-text { margin-top: var(--space-14); }
.ce-text textarea { resize: vertical; font-family: var(--font-mono); font-size: 17px; }
.ce-text textarea.drop { outline: 3px dashed var(--amber); outline-offset: 2px; }   /* 文件拖到简谱框上（10-25） */
.ce-err { min-height: 1.6em; margin-top: var(--space-6); font-size: 15px; color: var(--red-ink); }
.ce-help { margin-top: var(--space-6); color: var(--ink-2); font-size: 15px; }
.ce-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; }
/* 10-26 第 5 轮评审必修 5：summary 是 flex，Chrome 不画三角形，看起来像没有内容的标题 → 跟录音室“输入曲谱”“简谱怎么写”同一种箭头、同一侧（文字左边），打开时转向、不加动画 */
.ce-help summary::-webkit-details-marker { display: none; }
.ce-help summary::after { content: ""; order: -1; 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); }
.ce-help[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.ce-help ul { margin: var(--space-6) 0 0; padding-left: var(--space-22); display: grid; gap: var(--space-4); }
.ce-side { display: grid; gap: var(--space-12); }
.ce-acts { display: grid; gap: var(--space-10); }
.ce-acts .btn { justify-content: center; min-height: var(--tap-min); padding: 0 var(--space-18); font-size: 15px; }
.ce-acts .btn:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 900px) {   /* 排成一栏（平板、手机）：播放、用三步练、保存三颗黏在画面下方，输入到一半也按得到 */
  .ce-acts.ce-acts-main { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 6; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-8); background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
  .ce-side { display: contents; }
  .ce-grid > .ce-main { order: 1; } .ce-acts-main { order: 2; } .ce-side > :not(.ce-acts-main) { order: 3; }
  .ce-grid { display: flex; flex-direction: column; align-items: stretch; }
  html:has(#cl-edit:not([hidden])) { scroll-padding-bottom: calc(var(--space-52) * 1.5 + env(safe-area-inset-bottom, 0px)); }   /* Tab 到的字段不躲在黏住的三颗钮后面 */
}
@media (max-width: 760px) {   /* 手机：黏在底部五台菜单上面 */
  .ce-acts.ce-acts-main { bottom: calc(var(--space-52) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .ce-acts-main .btn { padding: 0 var(--space-6); font-size: 14px; white-space: normal; word-break: keep-all; line-height: 1.2; text-align: center; }   /* 排两行时只在“用三步｜练这首”中间换行 */
  html:has(#cl-edit:not([hidden])) { scroll-padding-bottom: calc(var(--space-52) * 2.5 + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 样稿注记（正式网站不会有） ---------- */
.cs-turn-lock { max-width: 22em; font-size: 15px; color: var(--glass-text-2); }
.ce-acts-end { margin-top: var(--space-6); }   /* 清空、删掉：跟“打开 MIDI 文件”分开，免得按错 */
/* 10-26 第 5 轮评审品味 3：右栏五颗一样大的描边钮，“清空重写”跟“播放整首”同一个份量 → 清空、删掉降成文字钮（按的范围照样 44px 高） */
.ce-acts.ce-acts-end { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-18); }
.ce-acts-end .btn { min-height: var(--tap-min); padding-inline: 0; border-color: transparent; background: transparent; color: var(--ink); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.ce-acts-end .btn:hover { border-color: transparent; background: transparent; text-decoration-thickness: 2px; }
.ce-file-k { font-feature-settings: "halt"; }   /* “打开文件（简谱文字文件或 MIDI）”：全角括号自带的半格空白收掉，不像空了两格（品味 3） */
.cs-legend { margin-top: var(--space-12); max-width: 56em; }   /* 谱上的记号怎么看（点、线、0、－） */
.cs[data-who="elder"] .cs-legend { font-size: 18px; color: var(--ink); }
.mock-notes { margin-top: var(--space-48); padding-block: var(--space-12); border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: 14px; }
.mock-notes summary { display: flex; align-items: center; min-height: var(--tap-min); color: var(--ink); font-weight: 700; cursor: pointer; }
.mock-notes ol { display: grid; gap: var(--space-6); margin: var(--space-10) 0 0; padding-left: var(--space-22); }

/* ---------- 投影全屏幕（老师） ---------- */
.cs-room:fullscreen { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-12); padding: var(--space-24); overflow: auto; background: var(--bg); }   /* 用满整个画面宽（电脑版的格线有 align-items: center，全屏幕要改回撑满） */
.cs-room:fullscreen .cs-steps { align-self: center; }   /* 全屏幕时三步搬进来，老师不用离开全屏幕就能换步骤 */
.cs-room:fullscreen .cs-fs-title { display: block; text-align: center; font: 700 5vh/1.2 var(--font-body); color: var(--ink); }   /* 投影时的曲名：后排也知道现在弹哪一首（读者测试 10-24） */
.cs-room:fullscreen .cs-stage { flex: 1; display: flex; flex-direction: column; }   /* 琴键往下长满：下面不留一大块空白（设计评审 10-24：1920×1080 琴键下空约 160px） */
.cs-room:fullscreen .cs-view { flex: 1 1 22vh; display: flex; flex-direction: column; }
.cs-room:fullscreen .cs-strip { flex: 1; display: flex; flex-direction: column; }
.cs-room:fullscreen .sc-head { font-size: 2.6vh; }
.cs-room:fullscreen .sc-cur { font-size: 12vh; }   /* 研究 16：8 公尺外约画面高的 12%（老师要实际量一次） */
.cs-room:fullscreen .sc-nxt { font-size: 5vh; }
.cs-room:fullscreen .cs-keys { flex: 1; height: auto; min-height: 22vh; }
.cs-room:fullscreen .cs-keys .k-name { font-size: 4.6vh; }
.cs-room:fullscreen .cs-lane { height: 22vh; }
.cs-room:fullscreen .cs-msg { margin-top: 0; font-size: 22px; text-align: center; }
.cs-room:fullscreen .cs-bar { justify-content: center; margin-top: 0; }
.cs-room:fullscreen .cs-chain, .cs-room:fullscreen .cs-keys .k-key { display: none; }   /* 投影出去：电脑键盘字母、只听都是杂讯 */
.cs-stage[data-who="elder"] .cs-keys .k-key, .cs-stage[data-who="kids"] .cs-keys .k-key { display: none; }   /* 长辈、小朋友看不懂 A S D 的小字（电脑键盘照样能弹） */

/* ---------- 宽度 ---------- */
@media (max-width: 1080px) { .cl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cl-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); padding-block: var(--space-28) var(--space-24); }
  .ce-grid { grid-template-columns: minmax(0, 1fr); }
  .ce-acts { grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); }
}
@media (max-width: 640px) {
  .cl-cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .cl-group { padding-block: var(--space-28) var(--space-14); }
  .cl-group-head h2 { font-size: 30px; }   /* freq-number 字级 */
  .cl-how b { font-size: 18px; }
  .cl-hero-cta .btn, .cl-hero-cta .cl-go { flex: 1 1 auto; justify-content: center; }
  .cs-top { flex-wrap: nowrap; gap: var(--space-8); }
  .cs-back { flex: none; width: var(--tap-min); justify-content: center; padding: 0; }
  .cs-back-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cs-who { display: flex; flex: 1; min-width: 0; }
  .cs-who button { flex: 1; padding-inline: var(--space-4); font-size: 14px; }
  /* 长辈：“←”旁边写出“所有曲子”，读者切换自己一排、字大一号（读者测试 10-24：只有箭头不知道会回到哪里；14px 偏小） */
  .cs[data-who="elder"] .cs-top { flex-wrap: wrap; }
  .cs[data-who="elder"] .cs-back { width: auto; padding: 0 var(--space-16); }
  .cs[data-who="elder"] .cs-back-t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .cs[data-who="elder"] .cs-who { flex-basis: 100%; }
  .cs[data-who="elder"] .cs-who button { font-size: 16px; }
  .cs-orig { display: none; }
  .cs-head-row { margin-top: var(--space-14); }
  .cs-head h1 { font-size: 34px; }   /* 手机各页页名统一 34px（10-25 评审：各页 32／34／40／52 不一） */
  .cs-steps-row { margin-top: var(--space-14); }
  .sc-line { --u: .8em; }
  .cs-steps { display: flex; width: 100%; }
  .cs-step { flex: 1; justify-content: center; padding-inline: var(--space-6); font-size: 15px; }
  .cs-step-n { width: 24px; height: 24px; font-size: 14px; }
  .cs-stage { padding: var(--space-10); gap: var(--space-10); }
  .cs-score { min-height: 108px; }
  .sc-cur { font-size: 30px; }
  .sc-nxt { font-size: 18px; }
  .cs-stage[data-who="elder"] .sc-cur, .cs-stage[data-who="teacher"] .sc-cur { font-size: 40px; }   /* 研究 16：大字简谱至少 40px */
  .cs-stage[data-who="elder"] .sc-nxt { font-size: 22px; }
  .cs-keys { height: 196px; }
  .cs-lane { height: 24vh; min-height: 128px; }
  .cs-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: var(--space-6); }   /* 手机底部 4 颗：播放、放慢、这句再一次、等你按（“这句再一次”排两行时，四颗一样高） */
  .cs-bar .btn { flex-direction: column; justify-content: center; gap: var(--space-4); min-height: 64px; padding: var(--space-6) 0; border-radius: var(--radius-18); font-size: 14px; line-height: 1.2; white-space: normal; text-align: center; }   /* 图标在上、字在下的四颗：圆角方块，不是椭圆 */
  .cs-bar .btn .gl { width: 20px; height: 20px; }
  .cs-bar #cs-full { grid-column: 1 / -1; flex-direction: row; min-height: var(--tap-min); }
  .cs-chain { display: flex; justify-content: center; width: 100%; margin-top: var(--space-10); }
  .cs-kick { display: none; }
  .cs[data-who="elder"] .sc-nxt { display: none; }   /* 手机上长辈一次只看一句（字放大），下一句的预告留给平板、电脑 */
  .cs-pct { font-size: 13px; }
  .cs[data-who="elder"] .cs-bar .btn { min-height: 64px; font-size: 16px; }   /* 长辈：字大一号（16px），一排四颗照样放得下“这句再一次” */
  .cs-more-btn { display: inline-flex; min-height: var(--tap-min); margin-top: var(--space-14); padding-inline: var(--space-16); font-size: 15px; }
  .cs-more { display: none; grid-template-columns: minmax(0, 1fr); }
  .cs-more.open { display: grid; }
  .cs-pick-opts { grid-template-columns: minmax(0, 1fr); }
  .cs-pick-o { min-height: 0; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: var(--space-14); }
  .cs-pick-o .cs-pick-big { grid-row: span 2; align-self: center; font-size: 30px; }
  .cs-also-act { display: grid; }
  .cs-also-act > * { justify-content: center; }
  .ce-digits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ce-digits button { min-height: 60px; }
  .ce-fields { display: grid; }
  .ce-f input[type="text"] { min-width: 0; }
}
@media (max-width: 360px) {   /* 320～360 宽的小手机：“老师上课”“照拍子弹”不拆成两行 */
  .cs-who button { padding-inline: calc(var(--space-4) / 2); font-size: 13px; white-space: nowrap; }
  .cs-step { gap: var(--space-4); padding-inline: var(--space-4); font-size: 14px; white-space: nowrap; }
  .cs-step-n { width: 20px; height: 20px; font-size: 12px; }
  .cs[data-who="elder"] .cs-bar .btn { font-size: 15px; }   /* 320 宽：长辈 16px 的“重来这句”放不下一行，小一号 */
}
@media (max-width: 760px) and (orientation: portrait) {
  .cs-bar { position: sticky; bottom: calc(var(--space-52) + var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 6; padding-block: var(--space-8); background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
  html:has(#cl-song:not([hidden])) { scroll-padding-bottom: calc(var(--space-52) * 3 + env(safe-area-inset-bottom, 0px)); }   /* 黏住的 4 颗钮（约 80px）＋五台菜单 */
  .cs-bar #cs-full { display: none; }   /* 手机直放不投影（投影用电脑、平板，或手机横放）：黏住的按钮列维持一排，少盖一点琴键 */
  /* 提示句排到谱的上面：不被黏在下面的按钮列盖住（设计评审 10-24 建议修：手机第一个画面看不到“按播放…”） */
  .cs-room { display: flex; flex-direction: column; }
  .cs-room > .cs-msg { order: -1; margin: 0 0 var(--space-10); }
  /* 10-26 第 5 轮评审必修 1：手机直放，一句长的歌（26／90 首）一按“换我弹”，谱上要按的音被卷到页眉上面（画面上留的是这一句的后半和好几行“下一句”）。
     谱框固定两行、自己卷（class-song.js scoreWin）：正在等的那个音所在的那一行永远在框里；“下一句”只在这一句最后一行时露出一行。上面留一点空给高音点与放大的音 */
  .sc-win { --win-rows: 2; overflow: hidden; margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-4)) 0; padding: var(--space-8) var(--space-4) 0; }
  .sc-win .sc-nxt { max-height: calc(1.1em + var(--space-6) + var(--space-12)); overflow: hidden; }   /* “下一句”只露出第一行（一行的高＝字高＋音上下的内距 6＋12）；照常换行、不往右超出（class-songs-fit 量超出的小节） */
}
/* 手机直放：琴键整条贴齐屏幕两边（只让开浏海等安全区），每一键才够宽。
   长辈 6 键：iPhone 13（390 宽）每键 390÷6－2＝63 CSS px，约 1.04 公分；儿童要横放（见下一段） */
@media (max-width: 640px) and (orientation: portrait) {
  .cs-stage { margin-left: calc(env(safe-area-inset-left, 0px) - max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(env(safe-area-inset-right, 0px) - max(16px, env(safe-area-inset-right, 0px))); border-radius: 0; padding-inline: 0; }
  .cs-score, .cs-stars { padding-inline: var(--space-12); }
  .cs-view { border-radius: 0; }
  .cs-bar { margin-left: calc(env(safe-area-inset-left, 0px) - max(var(--space-16), env(safe-area-inset-left, 0px))); margin-right: calc(env(safe-area-inset-right, 0px) - max(var(--space-16), env(safe-area-inset-right, 0px))); padding-inline: max(var(--space-16), env(safe-area-inset-left, 0px)) max(var(--space-16), env(safe-area-inset-right, 0px)); }   /* 按钮列的底色也贴齐两边：黏住时盖在琴上不留两个黑角 */
  .cs[data-who="elder"] .cs-keys { height: 220px; }
  .cs[data-who="elder"] .cs-keys .k-white { width: calc(100% / var(--white) - var(--space-4) / 2); margin-left: calc(var(--space-4) / 4); }   /* 键与键之间只留 2px，按得到的宽度多一点 */
}
@media (max-width: 640px) and (orientation: portrait) and (max-height: 760px) {   /* 矮的手机（iPhone SE 667、小 Android 640）：色块区与琴键矮一点，琴＋黏住的按钮列一屏放得下 */
  .cs-lane, .cs-stage[data-view^="blocks"] .cs-lane { height: 15vh; min-height: 88px; }
  .cs-stage .cs-keys, .cs-stage[data-view^="blocks"] .cs-keys, .cs-stage[data-who="teacher"] .cs-keys { height: 168px; }   /* 10-25：原本写 .cs-keys，权重输给设计系统的 .instrument.keys（手机 200px），这条一直没生效 */
  .cs[data-who="elder"] .cs-keys { height: 176px; }   /* 10-26 第 5 轮：谱框固定两行大字（必修 1）以后，375×667 长辈放不下、提示句被页眉切一半 → 琴键矮 20px（196→176，每键仍约 62×176） */
}
/* 笔记本电脑与平板横拿（电脑版面、窗口高 521～800）：一进来就看到整排琴键和播放键（10-25 评审 C2：1366×657 播放键整颗在画面外、1024×768 超出 16px）。
   标题区收成一列：FM 小字收起来（页眉的调频刻度已经亮着音乐教室），曲名与难度排同一行；舞台内距、琴键高度小一点。矮于 521 的横拿手机用下面“手机横放”那段 */
@media (min-width: 641px) and (min-height: 521px) and (max-height: 800px) {
  .cs > .wrap { padding-top: var(--space-10); }
  .cs-head-row { margin-top: var(--space-8); }
  .cs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-14); }
  .cs-head .cs-kick { display: none; }
  .cs-head .cs-teach { flex-basis: 100%; }
  /* 舞台只在一般画面收小；老师按“投影全屏幕”时照上面全屏幕那段长满 */
  .cs-room:not(:fullscreen) { margin-top: var(--space-10); }
  .cs-room:not(:fullscreen) .cs-stage { padding: var(--space-10); gap: var(--space-8); }
  .cs-room:not(:fullscreen) .cs-stage .cs-keys { height: 180px; }
  .cs-room:not(:fullscreen) .cs-stage[data-view^="blocks"] .cs-keys { height: 170px; }
  .cs-room:not(:fullscreen) .cs-stage[data-view^="blocks"] .cs-lane { height: 110px; }
  .cs-room:not(:fullscreen) .cs-stage[data-who="teacher"] .cs-keys { height: 160px; }
  .cs-room:not(:fullscreen) .cs-stage[data-who="elder"] .cs-keys { height: 150px; }
  .cs-room:not(:fullscreen) .cs-stage[data-who="elder"] .sc-cur { font-size: 40px; }   /* 长辈大字谱 52→40（研究 16 的下限 40px）：按钮 56px 高，1366×657 才放得下 */
  .cs-room:not(:fullscreen) > .cs-msg { margin-top: var(--space-8); }
  .cs-room:not(:fullscreen) > .cs-bar { margin-top: var(--space-8); }
  .cs-room:not(:fullscreen) > .cs-chain { margin-top: var(--space-8); }
}
/* 320～360 宽（10-25 评审 C1：320×568 一进“换我弹”，简谱“1 1 5 5｜6 6 5 —”折成两行把琴键推下去，8 颗白键的数字全被黏底按钮列盖住）：
   一句谱缩一级、音与音之间窄一点，一句排得下一行；长辈的大字谱不缩（研究 16：至少 40px），放不下时由 class-song.js 让琴键优先露出来 */
@media (max-width: 360px) {
  .sc-cur { font-size: 26px; }
  .cs-stage[data-who="teacher"] .sc-cur { font-size: 30px; }
  .sc-cur .sn:not(.big) { padding-inline: var(--space-5); }
  .sc-cur .sb { margin-inline: var(--space-5); }
}
/* 手机横放（小朋友 6 个大键）：琴键贴齐两边、占画面四成高，按钮排在下面一排；按了播放会把整个琴卷进画面
   iPhone 13 横放（844 宽、左右安全区各约 47）：(844－94)÷6≈125 CSS px，约 2.07 公分 */
@media (max-height: 520px) and (orientation: landscape) {
  .cs-head .cs-meta, .cs-kick, .cs-part { display: none; }
  .cs-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-14); margin-top: var(--space-8); }
  .cs-head h1 { font-size: 26px; }
  .cs-steps-row { margin-top: 0; }
  .cs-stage { margin-left: calc(env(safe-area-inset-left, 0px) - max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(env(safe-area-inset-right, 0px) - max(16px, env(safe-area-inset-right, 0px))); border-radius: 0; padding: var(--space-6) 0 0; gap: var(--space-6); }
  .cs-score, .cs-stars { padding-inline: var(--space-12); }
  .cs-view { border-radius: 0; }
  /* 10-26 第 5 轮：原本写 .cs-keys，641 宽以上输给设计系统的 .instrument.keys（226px），667×375 一般读者的琴键 226px、一屏放不下 */
  .cs-stage .cs-keys, .cs-stage[data-view^="blocks"] .cs-keys, .cs-stage[data-who="elder"] .cs-keys, .cs-stage[data-who="teacher"] .cs-keys { height: 38vh; }
  .cs-lane, .cs-stage[data-view^="blocks"] .cs-lane { height: 16vh; min-height: 0; }
  /* 10-26 第 5 轮评审必修 2（主控核准）：只在“一首歌”的画面、手机横放时，页眉不黏住（跟着卷走）、底部五台收起来，谱、提示句、琴键、按钮一屏放得下；
     提示句排在琴的上面自己一行（原本挤在按钮右边排成 3 行、被五台切掉）。共用外框的文件不动，只在这一页用 :has() 覆盖 */
  html:has(#cl-song:not([hidden])) { scroll-padding-top: var(--space-12); scroll-padding-bottom: var(--space-12); }
  html:has(#cl-song:not([hidden])) .site-head { position: relative; }
  html:has(#cl-song:not([hidden])) .tabbar { display: none; }
  .cs-room { display: flex; flex-direction: column; align-items: stretch; }
  .cs-room > .cs-msg { order: -1; margin: 0 0 var(--space-6); }
  .cs-room > .cs-chain { align-self: flex-start; }
  .cs-score { min-height: 0; }
  .sc-cur { font-size: 26px; } .sc-nxt { display: none; }
  .cs-stage[data-who="elder"] .sc-cur { font-size: 40px; }   /* 长辈大字谱 52→40（研究 16 的下限）：提示句改排在琴上面自己一行以后，844×390 长辈按钮列多出 2px */
  .sc-win { --win-rows: 1; overflow: hidden; margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-4)) 0; padding: var(--space-8) var(--space-4) 0; }   /* 谱框一行，跟着音换行（class-song.js scoreWin） */
  .cs-stars .gl { width: 20px; height: 20px; }
  .cs-msg { font-size: 15px; line-height: 1.4; }
  .cs-bar { margin-top: var(--space-6); gap: var(--space-6); }
  .cs-bar .btn { min-height: var(--tap-min); padding: 0 var(--space-14); font-size: 15px; }
  .cs-stage[data-who="kids"] .cs-keys .k-name { font-size: 26px; }
}
@media (pointer: coarse) { .cs-keys .k-key { display: none; } }
@media print { .cs-bar, .cs-more, .cs-more-btn, .cs-also, .mock-notes { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cs-strip, .sn.big.on { transition: none !important; transform: none; } .cs-strip { transform: translateX(calc(var(--off, 0) / var(--n, 8) * -100%)); } }
/* 英日文页（10-27 接线）：开头大钮“Listen to "Twinkle, Twinkle, Little Star"”比中文长，不换行会撑出 320～375 宽的画面 → 可以换行、置中 */
html:is([lang="en"], [lang="ja"]) .cl-hero-cta .btn { white-space: normal; line-height: 1.3; text-align: center; }
/* 英日文页：不换行的 .nw 只给中文页用；英日文的长词组要能断（跟 home.css 同一条） */
html:is([lang="en"], [lang="ja"]) main .nw { white-space: normal; overflow-wrap: anywhere; }
/* 英日文页（10-27 接线）：按钮、链接钮的字比中文长（Open "Beacon Fires Over the City" and listen from scene 1、シニア（大きな文字）、リズムに合わせて弾く…），
   不换行会撑出手机画面 → 可以换行（日文 keep-all 断不开时才硬折）；作曲表单的下拉列表选项很长（4 beats per measure (most common)），不让它撑宽字段 */
html:is([lang="en"], [lang="ja"]) :is(.cl-go, .cs-who button, .cs-step, .ce-acts .btn, .cs-also-act .btn) { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; padding-block: var(--space-6); }
html:is([lang="en"], [lang="ja"]) .ce-fields > * { min-width: 0; max-width: 100%; }
html:is([lang="en"], [lang="ja"]) .ce-f { grid-template-columns: minmax(0, 1fr); }   /* 栏宽不跟着最长的选项长 */
html:is([lang="en"], [lang="ja"]) .ce-f select { max-width: 100%; }
html:is([lang="en"], [lang="ja"]) .ce-f input[type="text"] { min-width: min(14em, 100%); }