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