/* 叮叮點歌 元件樣式。來源：樣稿 B 點歌台（design/trial-2026-10-20/b.html 第 33–436 行），值照抄。
   色票、間距、圓角、字型由 tokens.css 提供（tokens.json 編出來的），這裡不定義任何色票值。
   跟樣稿不同的地方：五個電台（.band-nav、.stations、.tabbar）；舊 Logo（.mark）與樣稿說明用的樣式拿掉；字型變數改名；寫死的顏色換成 token；劇照不帶圖檔。 */
:root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* 樣稿寫在 :root 的色票裡；色票搬去 tokens.css 後放這裡：夜間的勾選框、拉桿、捲軸才會用深色版（少了這行，夜間沒勾的勾選框是一塊白） */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.7 var(--font-body); }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--red-ink); }
:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; border-radius: 6px; }
.dial :focus-visible, .console :focus-visible, .tabbar :focus-visible { outline-color: var(--glass-red-ink); } /* 10-21：深色面板上 red-ink 只有 2.34:1，改用 glass-red-ink（7.3:1） */
.console .k-white:focus-visible { outline: 3px solid var(--key-white-ink); outline-offset: -7px; } .console .k-black:focus-visible { outline: 3px solid var(--key-black-ink); outline-offset: -6px; } /* 琴鍵的焦點框畫在鍵裡面：glass-red-ink 對白鍵只有 2:1，也不跟「下一個」的紅框混淆 */
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
h1, h2, h3, p, li, .lead, .fine { word-break: keep-all; overflow-wrap: break-word; } /* 以詞換行：詞之間有 <wbr>（共用程式插的） */
footer .wrap > span { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; } /* 頁尾出處也以詞換行，最後一行不落單 */
p, li { text-wrap: pretty; }
.nw { white-space: nowrap; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gl { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gl .fill { fill: currentColor; stroke: none; }
.ic { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .fill { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, a, select, label, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* 頁首：logo＋調頻刻度導覽 */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 900 21px/1 var(--font-body); letter-spacing: .02em; white-space: nowrap; }
.band-nav { margin-left: auto; position: relative; display: flex; align-items: flex-end; gap: 0; --w: 100px; padding: 0; height: 46px; background: linear-gradient(90deg, var(--line) 1px, transparent 1px) calc(var(--w) / 10) 100% / calc(var(--w) / 5) 9px repeat-x, linear-gradient(90deg, var(--line) 1px, transparent 1px) calc(var(--w) / 2) 100% / var(--w) 16px repeat-x; } /* 4.3-4：每一台正好坐在一根大刻度上。樣稿四台每台 80px（980px 以下 72px）；改五台後「AI 作曲工作室」要 93px，改成 100px、不再縮，才能一台一行（同 R3-B1） */
.band-nav a { position: relative; display: grid; justify-items: center; text-decoration: none; color: var(--ink); width: var(--w); padding: 0 0 18px; font-weight: 700; font-size: 15px; line-height: 1.2; }
.band-nav a .f { font: 500 11px/1 var(--font-mono); color: var(--ink-2); margin-bottom: 3px; }
.band-nav a::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 2px; height: 16px; margin-left: -1px; background: var(--red); opacity: 0; }
.band-nav a[aria-current]::after { opacity: 1; }
.band-nav a:hover::after { opacity: .35; }
.band-nav a[aria-current] .f, .band-nav a:hover .f { color: var(--red-ink); }
.tools { display: flex; gap: 6px; }
.tool { font: 700 14px/1 var(--font-body); color: var(--ink); background: transparent; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tool:hover { border-color: var(--ink); }

/* 主視覺 */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: center; padding-block: 52px 44px; }
.hero h1 { font: 700 clamp(42px, 5.8vw, 74px)/1.12 var(--font-body); letter-spacing: -.02em; }
html[lang="en"] .hero h1 { font-size: clamp(34px, 4.2vw, 54px); text-wrap: balance; }
.hero .lead { margin-top: 16px; font-size: 18px; color: var(--ink-2); max-width: 30em; }
.free { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 30em; }
.cta { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; margin-top: 22px; justify-items: start; align-items: center; }
.cta .fine { grid-column: 2 / 4; max-width: 24em; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 24px; font: 700 17px/1 var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-main { background: var(--red); color: var(--on-red); }
.btn-main:hover { filter: brightness(.92); }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--panel); }
.fine { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* 收音機：一個物件——外殼、調頻玻璃、喇叭網、音量表；不再一層一層加框 */
.radio { background: var(--panel); border-radius: 22px; padding: 18px; display: grid; gap: 14px; box-shadow: var(--shadow-radio); }
.dial { position: relative; background: var(--glass); color: var(--glass-ink); border-radius: 14px; padding: 16px 18px 14px; }
.onair { position: absolute; right: 14px; top: 12px; display: inline-flex; align-items: center; gap: 7px; font: 800 14px/1 var(--font-display); letter-spacing: .14em; color: var(--glass-red-ink); border: 1.5px solid color-mix(in srgb, var(--glass-red) 55%, transparent); border-radius: 999px; padding: 5px 10px 4px; }
.onair i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--glass-red) 60%, transparent); }
.onair { visibility: hidden; } /* 平常不亮：讀者把常亮的 ON AIR 讀成「正在直播」 */
.is-onair .onair { visibility: visible; color: var(--on-red); background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent); }
.is-onair .onair i { background: var(--on-red); }
.dial-scale { position: relative; height: 62px; margin-top: 16px; cursor: ew-resize; touch-action: none; }
.dial-scale .tick { position: absolute; bottom: 18px; width: 1px; height: 8px; background: var(--glass-dim); }
.dial-scale .tick.big { height: 16px; background: var(--glass-ink); }
.dial-scale .num { position: absolute; bottom: 0; transform: translateX(-50%); font: 500 11px/1 var(--font-mono); color: var(--glass-dim); }
.needle { position: absolute; top: 2px; bottom: 14px; width: 3px; margin-left: -1.5px; background: var(--red); border-radius: 2px; left: var(--x, 6%); transition: left .4s cubic-bezier(.3,.7,.2,1); box-shadow: 0 0 10px color-mix(in srgb, var(--red) 70%, transparent); }
.dragging .needle { transition: none; }
.stations { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 8px; } /* 樣稿四台，改五台 */
.station { background: transparent; color: var(--glass-ink); border: 0; border-top: 2px solid transparent; padding: 8px 6px 4px; cursor: pointer; font: 700 15px/1.25 var(--font-body); display: grid; gap: 3px; text-align: left; }
.station .f { font: 500 12px/1 var(--font-mono); color: var(--glass-dim); }
.station:hover .f { color: var(--glass-ink); }
.station[aria-checked="true"] { border-top-color: var(--red); }
.station[aria-checked="true"] .f { color: var(--glass-red-ink); }
.now { margin-top: 10px; display: grid; gap: 4px; min-height: 74px; border-top: 1px solid var(--glass-rule); padding-top: 10px; }
.now .kick { font: 500 12px/1 var(--font-mono); color: var(--glass-dim); letter-spacing: .06em; }
.now b { font-size: 18px; }
.now p { font-size: 15px; color: var(--glass-text-2); }
.radio-low { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; align-items: center; }
.grille { height: 74px; border-radius: 12px; background: radial-gradient(circle, var(--ink-2) 1.6px, transparent 2px) 50% 50% / 9px 9px, transparent; opacity: .45; }
.meter { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 74px; padding: 10px 12px; background: var(--glass); border-radius: 12px; }
.meter i { width: 10px; border-radius: 3px; background: var(--amber); transform-origin: bottom; }
.meter i:nth-child(1) { height: 32%; } .meter i:nth-child(2) { height: 52%; } .meter i:nth-child(3) { height: 41%; } .meter i:nth-child(4) { height: 62%; }
@keyframes vu { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.is-onair .meter i { animation: vu .45s ease-in-out infinite alternate; } .is-onair .meter i:nth-child(2) { animation-delay: .1s; } .is-onair .meter i:nth-child(3) { animation-delay: .2s; }
.radio-low { grid-template-columns: auto auto minmax(0, 1fr) 96px; }
.knob { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-knob); } /* 收音機的旋鈕＝開場音樂（評圖 R2-B4） */
.knob .gl { width: 22px; height: 22px; margin-left: 3px; }
.knob:hover { filter: brightness(1.2); }
.knob-t { font: 700 15px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; }
.radio-cap { margin-top: -2px; }
.radio-cap-m { display: none; }
.now .go { justify-self: start; margin-top: 2px; color: var(--glass-red-ink); font-weight: 700; text-decoration: none; }
.now .go:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 641px) { .now .go[data-st="play"] { display: none; } }
@media (max-width: 640px) { .now .go { display: inline-flex; align-items: center; min-height: 44px; } } /* 手機可點範圍 ≥44px */ /* 電腦：大標下已有主按鈕，同一個入口只放一次 */

section.band { padding-block: 48px; border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 6px; margin-bottom: 24px; }
.sec-head .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }
.sec-head h2 { font: 700 clamp(28px, 3.4vw, 40px)/1.2 var(--font-body); letter-spacing: -.01em; }
.sec-head p { color: var(--ink-2); max-width: 40em; }

/* 樂器架：五類五欄；每樣樂器一列，名字貼在紙膠帶上（不放底色卡、不放假推桿） */
.rack { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 26px; }
.rack-row h3 { font: 700 15px/1.3 var(--font-body); color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.rack-row h3 .mono { font-size: 12px; font-weight: 400; }
.channels { list-style: none; margin: 0; padding: 0; display: grid; }
.channels li + li { border-top: 1px solid var(--line); }
.ch { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 10px; width: 100%; padding: 9px 4px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; border-radius: 6px; }
.ch:hover { background: var(--panel); }
.ch .ic { width: 38px; height: 38px; grid-row: span 2; }
.ch .tape { justify-self: start; background: var(--tape); color: var(--tape-ink); font-weight: 700; font-size: 15px; padding: 1px 9px; transform: rotate(-1.2deg); border-radius: 2px; }
.channels li:nth-child(3n+2) .tape { transform: rotate(.8deg); } .channels li:nth-child(3n) .tape { transform: rotate(-.4deg); } /* 像手貼的，不是排版歪掉 */
.ch .en { font: 11px/1.3 var(--font-mono); color: var(--ink-2); }

/* 五個電台（樣稿四台） */
.freqs { display: grid; gap: 0; }
.freq { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.freq:last-child { border-bottom: 1px solid var(--line); }
.freq .f { font: 800 30px/1 var(--font-display); letter-spacing: .02em; }
.freq .f small { font: 500 14px/1 var(--font-mono); margin-right: 6px; color: var(--ink-2); }
.freq h3 { font: 700 22px/1.3 var(--font-body); }
.freq p { color: var(--ink-2); font-size: 16px; }
.freq .go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--red-ink); white-space: nowrap; }
.freq:hover h3 { text-decoration: underline; text-underline-offset: 5px; }

/* 精選：音樂故事節目＋節目表（高度各自依內容） */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.program { display: grid; gap: 10px; } /* 評圖 B-8：不放底色面板 */
.program .still { aspect-ratio: 16 / 7; border-radius: 10px; background: var(--panel) 50% 38% / cover; } /* 劇照由頁面帶入：style="background-image: url(…)"；沒有圖時是 panel 色塊 */
.program .kick { font: 500 12px/1 var(--font-mono); color: var(--ink-2); letter-spacing: .1em; }
.program h3 { font: 700 26px/1.25 var(--font-body); }
.program .meta { font-size: 14px; color: var(--ink-2); }
.segs { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 0; }
.segs li { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.segs .mono { color: var(--ink-2); }
.slip { border-top: 2px dashed var(--line); padding-top: 18px; } /* 評圖 B-8：節目表只留撕線，不放底色 */
.slip h3 { font: 700 22px/1.3 var(--font-body); }
.slip .kick { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--ink-2); }
.flow { list-style: none; padding: 0; margin: 12px 0 0; display: grid; }
.flow li { display: grid; grid-template-columns: 6em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.flow .step { font-weight: 700; }

footer { border-top: 1px solid var(--line); padding-block: 28px 120px; color: var(--ink-2); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* 錄音室：播音台——上面是錄好的音軌，下面是控制台上的樂器 */
.play-head .wrap { padding-block: 26px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.play-head h1 { font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-body); letter-spacing: -.01em; }
.seg { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 9px 16px; font: 700 15px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.settings { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; width: 100%; }
.field { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.field b { color: var(--ink); }
select { font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 700 18px/1 var(--font-body); cursor: pointer; }
.stepper button:hover, .chip:hover, .ibtn:hover { border-color: var(--ink); }
.panel { padding-block: 16px; border-top: 1px solid var(--line); }
.tracks-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.tracks-head h2 { font: 700 26px/1.2 var(--font-body); margin-right: auto; }
.tracks { display: grid; }
.track { display: grid; grid-template-columns: 236px minmax(0, 1fr) auto; grid-template-areas: "head lane ctl"; column-gap: 16px; row-gap: 6px; align-items: center; padding-block: 5px; border-top: 1px solid var(--line); }
@media (max-width: 1080px) { .track { grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "head lane" "ctl ctl"; } .tr-ctl { justify-content: flex-end; } }
.track:first-child { border-top: 0; }
.tr-head { grid-area: head; display: flex; align-items: center; gap: 8px; }
.tr-head .ic { width: 28px; height: 28px; flex: none; }
.tr-name { display: grid; line-height: 1.3; margin-right: auto; min-width: 0; }
.tr-name .tape { justify-self: start; background: var(--tape); color: var(--tape-ink); font-weight: 700; padding: 1px 8px; border-radius: 2px; transform: rotate(-1deg); }
.tr-name .mono { font-size: 12px; color: var(--ink-2); }
.tr-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lane { grid-area: lane; position: relative; background: var(--glass); border-radius: 10px; overflow: hidden; height: 44px; }
.lane svg { display: block; width: 100%; height: 100%; }
.lane .grid { stroke: var(--glass-rule); stroke-width: 1; }
.lane .blk { fill: var(--amber); }
.lane .blk.lit { fill: var(--glass-red); }
.lane::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--pos, 0) * 100%); width: 2px; background: var(--glass-red-line); opacity: 0; }
.run .lane::after { opacity: 1; }
.track.dim .lane { opacity: .35; }
.track.dim .tr-name .tape { opacity: .7; } /* 10-21：.6 時日間字只剩 3.7:1 */
.track.fresh .lane { box-shadow: 0 0 0 2px var(--red); }
.chip { font: 700 13px/1 var(--font-body); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
.chip[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.ibtn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.ibtn.more { display: none; }
.tr-ctl input[type="range"] { width: 84px; accent-color: var(--red); }
.bridge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: none; }
.bridge:hover { text-decoration: underline; }
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.inst-title { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.inst-title .ic { width: 46px; height: 46px; }
#inst-name { font: 700 26px/1.1 var(--font-body); }
.note-mock { font: 12px/1.4 var(--font-mono); color: var(--ink-2); }
#rec-panel { display: contents; }
#rec-panel[hidden] { display: none; }
.btn-rec { background: var(--ink); color: var(--bg); }
.btn-rec .gl { color: var(--red); }
.btn-rec.on { background: var(--red); color: var(--on-red); } .btn-rec.on .gl { color: var(--on-red); }
#count { font: 800 40px/1 var(--font-display); color: var(--red-ink); min-width: 1.2em; }
#status { font-size: 15px; color: var(--ink-2); flex-basis: 100%; }
.is-recording #status { color: var(--red-ink); font-weight: 700; }
.follow-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.follow-stats .big { font: 800 32px/1 var(--font-display); }
.follow-lane { margin-top: 10px; background: var(--glass); border-radius: 10px; padding: 8px; }
.follow-lane svg { display: block; width: 100%; height: auto; }
.follow-lane .blk { fill: var(--lane-next); } .follow-lane .blk.done { fill: var(--amber); opacity: .45; } .follow-lane .blk.next { fill: var(--glass-red); }
.console { background: var(--glass); border-radius: 18px; padding: 12px; margin-top: 10px; color: var(--glass-ink); }
.instrument { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.k-name { font: 700 12px/1 system-ui, "Segoe UI", sans-serif; }
.k-key { font: 11px/1 var(--font-mono); opacity: .75; }
@keyframes miss { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.instrument .miss { animation: miss .25s; }
/* 1. 琴鍵 */
.instrument.keys { position: relative; height: 230px; }
.k { position: absolute; top: 0; border: 0; cursor: pointer; font: inherit; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 12px; gap: 3px; }
.k-white { left: calc(var(--wi) * 100% / var(--white)); width: calc(100% / var(--white) - 4px); margin-left: 2px; height: 100%; background: var(--key-white); color: var(--key-white-ink); border-radius: 0 0 8px 8px; }
.k-black { left: calc(var(--wi) * 100% / var(--white) - 100% / var(--white) * .3); width: calc(100% / var(--white) * .6); height: 60%; z-index: 2; background: var(--key-black); color: var(--key-black-ink); border-radius: 0 0 6px 6px; box-shadow: var(--key-black-ring); }
.k:disabled { cursor: not-allowed; }
.k-white:disabled { background: var(--key-white-off); }
.k-black:disabled { background: var(--key-black-off); }
.k-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); margin-bottom: 6px; box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 70%, transparent); } /* 能彈的鍵：一顆琥珀燈 */
.k.on { background: var(--amber); color: var(--on-amber); }
.k.on .k-mark { background: var(--on-amber); box-shadow: none; }
.k.next { box-shadow: inset 0 0 0 4px var(--red); }
/* 2. 一排音鍵（像控制台上一排會亮的鍵） */
.instrument.bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; height: 230px; align-items: end; }
.bar { height: calc(100% - var(--i) * 4%); border: 0; border-radius: 12px; cursor: pointer; font: inherit; color: var(--glass-ink); background: var(--glass-2); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; padding-bottom: 12px; box-shadow: var(--shadow-bar), inset 0 0 0 1.5px var(--glass-edge); } /* 10-21：加 glass-edge 內框，一條一條看得出來 */
.fam-wind .bar { border-radius: 999px; }
.bar.on { background: var(--amber); color: var(--on-amber); box-shadow: var(--shadow-bar); }
.bar.on .k-mark { background: var(--on-amber); box-shadow: none; }
.bar.next { box-shadow: inset 0 0 0 4px var(--red); }
/* 3. 一排弦 */
.instrument.strings { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: 240px; }
.str { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; padding-bottom: 8px; cursor: pointer; }
.str-line { position: absolute; top: calc(var(--i) * 3%); bottom: 42px; left: 50%; width: 2px; margin-left: -1px; background: var(--glass-dim); border-radius: 1px; }
.str.on .str-line { background: var(--amber); width: 3px; box-shadow: 0 0 8px var(--amber); animation: twang .18s; }
@keyframes twang { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.str.next .str-line { background: var(--glass-red); }
/* 4. 吉他 */
.instrument.guitar { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
.chords { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.chord { min-height: 64px; border-radius: 14px; border: 0; background: var(--glass-2); box-shadow: inset 0 0 0 1.5px var(--glass-edge); color: var(--glass-ink); cursor: pointer; font: inherit; display: grid; place-content: center; gap: 2px; }
.chord b { font: 800 26px/1 var(--font-display); }
.chord[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); box-shadow: none; }
.strum { position: relative; height: 230px; border-radius: 14px; background: var(--glass-2); box-shadow: inset 0 0 0 1.5px var(--glass-edge); display: grid; grid-template-rows: repeat(6, 1fr); padding: 12px 0; cursor: ns-resize; }
.gs { position: relative; } .gs i { position: absolute; left: 0; right: 0; top: 50%; height: calc(1px + var(--w, 1px)); background: var(--glass-dim); }
.gs:nth-child(1) i { --w: 3px; } .gs:nth-child(2) i { --w: 2.5px; } .gs:nth-child(3) i { --w: 2px; } .gs:nth-child(4) i { --w: 1.5px; } .gs:nth-child(5) i { --w: 1px; } .gs:nth-child(6) i { --w: .5px; }
.gs.on i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.strum-hint { position: absolute; right: 12px; bottom: 8px; font-size: 13px; color: var(--glass-dim); }
/* 5. 鼓組（控制台上的線稿，敲到的那一顆亮琥珀色） */
.instrument.kit { max-width: 760px; margin-inline: auto; }
.kit-svg { display: block; width: 100%; height: auto; }
.kit-stand { stroke: var(--glass-dim); stroke-width: 3; fill: none; stroke-linecap: round; }
.kp { cursor: pointer; outline: none; }
.kp-face { fill: var(--glass-2); stroke: var(--glass-ink); stroke-width: 3; }
.kp-cym .kp-face { fill: color-mix(in srgb, var(--amber) 30%, var(--glass-2)); }
.kp-bell { fill: var(--glass-dim); }
.kp-body { fill: var(--drum-body); stroke: var(--glass-ink); stroke-width: 3; }
.kp-ring { fill: none; stroke: var(--glass-dim); stroke-width: 2; }
.kp-t { fill: var(--glass-ink); font: 700 17px var(--font-body); }
.kp-k { fill: var(--glass-dim); font: 500 14px var(--font-mono); }
.kp.on .kp-face { fill: var(--amber); }
.kp:focus-visible .kp-face { stroke: var(--glass-red-ink); stroke-width: 5; }
/* 6. 手鼓 */
.instrument.pads { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.pad { width: 170px; height: 170px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 50% 45%, var(--pad-face) 0 55%, var(--pad-edge) 56% 100%); color: var(--glass-ink); display: grid; place-content: center; gap: 6px; font: inherit; box-shadow: 0 0 0 5px var(--drum-body); }
.pad.on { background: var(--amber); color: var(--on-amber); }
.pad-4 { width: 200px; height: 200px; }

.tabbar { display: none; }
#toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 10px 8px 18px; border-radius: 999px; font-size: 14px; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; }
#toast[hidden] { display: none; }
.toast-act { font: 700 14px/1 var(--font-body); color: var(--bg); background: transparent; border: 1.5px solid currentColor; border-radius: 999px; padding: 8px 14px; min-height: 36px; cursor: pointer; }

@media (max-width: 1080px) {
  .rack { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .track { grid-template-columns: 250px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 34px 28px; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .instrument.guitar { grid-template-columns: minmax(0, 1fr); }
  .chords { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .band-nav { display: none; } .tools { margin-left: auto; } }
@media (max-width: 640px) {
  .tool { min-height: 44px; padding-inline: 14px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--glass); padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); } /* 樣稿四台，改五台 */
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 48px; padding: 4px 2px; color: var(--glass-dim); text-decoration: none; font-size: 13px; font-weight: 700; }
  .tabbar a .f { font: 500 10px/1 var(--font-mono); }
  .tabbar a[aria-current] { color: var(--glass-ink); box-shadow: inset 0 2px 0 var(--glass-red-line); }
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta .fine { grid-column: 1; }
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rack { grid-template-columns: minmax(0, 1fr); }
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .channels li + li { border-top: 0; }
  .freq { grid-template-columns: minmax(0, 1fr); }
  .flow li { grid-template-columns: minmax(0, 1fr) auto; } .flow .t { grid-column: 1 / -1; } .flow li > .mono { grid-column: 2; grid-row: 1; }
  .seg button { min-height: 44px; padding-inline: 18px; }
  .stepper button { width: 44px; height: 44px; }
  .track { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "ctl" "lane"; }
  .tr-ctl { display: none; }
  .track.open .tr-ctl { display: flex; }
  .tr-ctl .chip { min-height: 44px; padding-inline: 14px; }
  .ibtn { width: 44px; height: 44px; }
  .ibtn.more { display: inline-grid; }
  .listen-t { display: none; }
  .instrument.keys, .instrument.bars { height: 200px; }
  .k-key, .k-black .k-name { display: none; }
  .instrument.strings { height: 210px; }
  .strum { height: 200px; }
  .pad { width: 130px; height: 130px; } .pad-4 { width: 150px; height: 150px; }
}
/* 筆電一屏放得下：標題列帶設定、軌道壓扁、樂器略矮 */
.tr-head .chip { flex: none; white-space: nowrap; }
.tr-title > :last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-head .wrap { padding-block: 18px 10px; }
.settings { width: auto; flex: 1 1 auto; justify-content: flex-end; }
.panel { padding-block: 12px; }
@media (min-width: 641px) { .instrument.keys, .instrument.bars { height: 226px; } .instrument.strings { height: 232px; } .strum { height: 226px; } } /* 手機高度在上面的 640px 區塊 */
@media (max-width: 640px) { .play-body { display: flex; flex-direction: column; } .play-body > .panel:last-child { order: -1; border-top: 0; } }
@media (max-width: 640px) { .logo { min-height: 44px; } select { min-height: 44px; } .field:has(> input[type="checkbox"]) { min-height: 44px; } .field input[type="checkbox"] { width: 20px; height: 20px; } .tracks-head .chip, .bridge { min-height: 44px; } .tr-head .chip[data-act="listen"] { min-width: 44px; min-height: 44px; justify-content: center; } }
@media (max-width: 640px) { /* 手機：樂器整個放進第一屏（底部選單上方） */
  #inst-ic, #inst-name { display: none; } /* 正上方的「樂器」選單已經寫了是哪一樣 */
  .note-mock { border: 0; padding: 0; font-size: 12px; }
  .instrument { margin-top: 8px; }
  .instrument.keys, .instrument.bars, .instrument.strings { height: 196px; }
  .strum { height: 136px; padding-bottom: 30px; } /* 10-21：下方讓給提示字，原本壓在最下面那條弦上 */
  .chord { min-height: 48px; }
}
/* 第 2 輪評圖三款共通修正 */
[hidden] { display: none !important; } /* .field 的 display 會蓋掉 hidden：選鼓時「音階」其實沒藏起來 */
input[type="checkbox"] { accent-color: var(--ink); } /* R2-S10：不要瀏覽器預設藍 */
.btn:disabled { opacity: .35; cursor: not-allowed; filter: none; } /* R2-S7：停用要看得出來 */
#play-all { background: var(--ink); color: var(--bg); } /* 4.1-3 紅色＝錄音：全部播放改墨色 */
.btn-rec { background: var(--red); color: var(--on-red); } .btn-rec .gl { color: var(--on-red); }
.btn-rec.on { background: var(--red); color: var(--on-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 28%, transparent); animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--red) 10%, transparent); } }
body.is-follow .play-body > .panel:first-child { display: none; } /* R2-S2：跟著彈時已錄的軌先收起來 */
#follow-msg.is-miss { color: var(--red-ink); font-weight: 700; } /* R2-S12 */
.kit-labels text { paint-order: stroke; stroke: var(--glass); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; } /* R2-S4：字不被鼓蓋、不被鈸架穿過 */
.kpad:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } /* 手機鼓墊的焦點（.kp 拿掉了外框） */
.set-more { display: none; }
@media (min-width: 641px) {
  .tracks { overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; } /* R2-S3：最多 3 條高（高度由程式量） */
  .instrument.kit .kit-svg { height: 240px; width: auto; max-width: 100%; margin-inline: auto; } /* R2-S3：鼓組跟其他樂器一樣高 */
}
@media (max-width: 640px) { /* R2-S8：手機設定收成一列；R2-S5：鼓組排成兩排大鼓墊 */
  .settings:not(.open) > .tonal, .settings:not(.open) > .stepper { display: none; }
  .set-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: 700 15px/1 var(--font-body); cursor: pointer; }
  .set-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .settings.open .set-more::after { transform: translateY(2px) rotate(225deg); }
  .kit-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .kpad-kick { grid-column: span 2; }
  .kpad { min-height: 88px; padding: 6px; border: 0; border-radius: 12px; background: var(--glass-2); color: var(--glass-ink); font: 700 13px/1.25 var(--font-body); cursor: pointer; }
  .kpad-cym { border-radius: 999px; }
  .kpad.on { background: var(--amber); color: var(--on-amber); }
}
/* 手機首屏（第 2 輪評圖） */
.cta .fine { max-width: 22em; text-wrap: balance; } /* 4.1-6：AI 小字像那顆鈕的註腳 */
.free { color: var(--ink-2); }
@media (max-width: 640px) { /* 4.1-1：手機第一屏讓收音機先出場 */
  .hero .wrap { gap: 14px; padding-block: 22px 26px; }
  .hero .wrap > div:first-child { display: contents; }
  .hero h1 { order: 1; } .hero .radio { order: 2; } .hero .cta { order: 3; } .hero .radio-cap-m { order: 4; } .hero .lead { order: 5; } .hero .free { order: 6; } /* R3-S5：主按鈕緊接在收音機下面 */
  .radio .radio-cap { display: none; } .hero .radio-cap-m { display: block; margin: 0; } /* 手機沒有旋鈕：說明改「拖指針轉台」，放在按鈕下面（收音機 ≤55% 可見高度） */
  .radio { padding: 14px; gap: 10px; } .dial-scale { margin-top: 6px; }
  .radio .stations, .radio .radio-low { display: none; } /* 手機收音機只留刻度與這一台：五台底部選單已經有，拖指針就能轉台 */
  .hero .lead, .hero .free, .hero .cta { margin-top: 0; }
  .cta { display: flex; flex-wrap: wrap; gap: 10px; } .cta .fine { flex-basis: 100%; }
}
#inst-how { max-width: 26em; } /* 說明太長會把錄音鈕那一列擠成兩列 */
/* 第 3 輪評圖三款共通修正 */
#toast { left: 16px; right: 16px; margin-inline: auto; width: fit-content; max-width: min(560px, calc(100% - 32px)); transform: none; } /* R3-S2：不要被限制在半個螢幕寬 */
#toast .toast-act { white-space: nowrap; flex: none; }
#toast.inline { position: static; margin: 0 12px 0 0; max-width: none; z-index: auto; } /* 電腦錄音室：放在軌道標題旁 */
html[lang="en"] { --font-body: var(--font-body-en); } /* R3-S4：英文撇號、引號不要用中文字型的全形字 */
html[lang="ja"] { --font-body: var(--font-body-ja); }
body.is-follow #inst-real { display: none; } /* R3-S11：跟著彈不能錄音 */
.k-white:disabled { background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(0, 0, 0, .12) 7px 9px); } /* 停用的鍵畫斜線：說明寫「斜線鍵」 */
.k-black:disabled { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .18) 6px 8px); }
#inst-how { max-width: 27em; }
@media (max-width: 640px) { .settings { justify-content: flex-start; column-gap: 12px; } } /* R3-S7：手機設定列靠左 */
@media (max-width: 640px) { html[lang="en"] .settings > .field:first-child > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* 英文手機：選單上就寫著樂器名，「Instrument」只留給讀屏，設定列才排得進一行（R3-S3 手機） */
.tr-ctl input[type="range"] { accent-color: var(--ink); } .track.fresh .lane { box-shadow: 0 0 0 2px var(--ink); } /* 4.1-3：紅色只給錄音 */
.tr-name .mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; } /* 4.1-4 */
html[lang="en"] .band-nav { --w: 92px; } /* R3-B1：英文頁首每台一行、不互撞 */
@media (max-width: 640px) { .kpad { border: 2px solid var(--glass-dim); } } /* R3-B2：鼓墊邊界對操作台 ≥3:1 */
/* 提示詞框 PromptPanel（10-27 BGM 詞庫）：每首附「做這首用的提示詞」，按了才展開。原文一字不改、英文字型、左邊一條線（同作曲頁英文區塊），底色 panel；長字可以斷，不撐破手機 */
.pr-h { margin: 0; font: 700 17px/1.35 var(--font-body); }
.pr-sum { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 52em; }
.pr-text { margin: 0; padding: var(--space-12) var(--space-14); border-left: 3px solid var(--line-strong); border-radius: var(--radius-8); background: var(--panel); font: 400 15px/1.65 var(--font-body-en); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 52em; }
.pr-how, .pr-diff, .pr-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 52em; }
.pr-note a { font-weight: 700; text-underline-offset: 3px; }
/* 播放模式鈕 PlayModes（10-27）：深色播放器上的兩顆開關「單曲循環」「本類輪播」（aria-pressed；同時最多一顆亮，兩顆都關＝播完就停）。開著＝紅線框＋紅字（深色面板上的紅，同正在播） */
.pl-end { display: inline-flex; align-items: center; gap: var(--space-6); }
.pl-mode { display: inline-flex; align-items: center; gap: var(--space-6); min-height: 40px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--glass-ink); box-shadow: inset 0 0 0 1.5px var(--glass-edge); font: 700 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.pl-mode .gl { width: 16px; height: 16px; }
.pl-mode[aria-pressed="true"] { background: var(--glass-2); box-shadow: inset 0 0 0 1.5px var(--glass-red-line); color: var(--glass-red-ink); }
.pl-mode:hover { filter: brightness(1.25); }
@media (pointer: coarse) { .pl-mode { min-height: var(--tap-min); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }