/* 叮叮點歌 dingsong.ai 操作樣稿・AI 作曲工作室（/make/，2026-10-21）
   載入順序：assets/ds/tokens.css → assets/ds/bundle.css → assets/shell.css → 這支。只用設計系統的 token（顏色 var(--…)、間距 --space-…、圓角 --radius-…），
   字級只用字級表的值（後面註明級別；clamp 的下限照 tokens.json 的用法說明）。現成元件：Button、Chip、Segmented（.seg）、Stepper、RequestSlip（.slip）、TrackList 的音軌（.lane）。
   這頁新做的元件（之後補進設計系統）：步驟列 mk-stepbar、場合鍵 mk-occ、選項方塊 mk-tile、選項分頁籤 mk-tabs、文字欄 mk-input、情緒地圖 mk-pad、
   節拍器 mk-met、就地確認 mk-askbox、到 Gemini 三步圖解 mk-go。可以按的東西一律有框線或底色（看起來就是按鈕）。
   例外（E 第 4 輪評審品味 6，taste.md「細線分隔取代框與底色」）：第 1 步場合清單、第 2 步分頁籤改成細線分隔（每列／每格底下一條 line，滑過去有底色、選中的分頁一條墨色粗線）。 */

/* ---------- 手機的步驟列：三步都放在這一步最上面、跟著頁面捲，不固定在底部。
   E 第 2 輪評審 M2：第 2、3 步原本固定在底部五台上面，頁首 67＋步驟列 48＋五台 56＝171px，佔 320×640 的 27%，點分頁的內容還被它蓋住（M1）。
   拿掉以後只剩外框的頁首與底部五台；捲動留白與提示列的位置照外框原本的值（這一頁不再另外改） ---------- */

/* ---------- 頻道頭：第一句就講這頁能做什麼；費用與帳號不放小字 ---------- */
.mk-head .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-24) var(--space-44); align-items: start; padding-block: var(--space-44) var(--space-28); }   /* 靠上對齊：大標是第一眼（E 第 2 輪評審品味建議 6：原本靠下，1440 寬左欄上面空 110px，眼睛先落到右邊的費用說明） */
@media (max-width: 900px) { .mk-head .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-18); padding-block: var(--space-28) var(--space-18); } }
.mk-step .kick { font: 700 12px/1.3 var(--font-mono); letter-spacing: .1em; color: var(--red-ink); }
.mk-head .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }   /* 頁頭的台呼跟其他四台同一款（10-25 第 2 輪評審）；中文由 display 後備的本站內文字型畫 */   /* mono-label 字級、red-ink：小標裡有中文，不用只給數字的 display 字型 */
.mk-slip .kick, .mk-mini .kick { font: 700 12px/1.3 var(--font-body); letter-spacing: .08em; color: var(--ink-2); }   /* 單子的小標照 RequestSlip 用 ink-2；字型用內文（等寬字的 Gemini 最後一個 i 看起來像 1） */
.mk-start { display: none; margin-top: var(--space-18); }   /* 手機第一屏：頁首說明佔滿一屏，這顆告訴你第一步按哪裡（只在第 1 步） */
@media (max-width: 760px) { .mk-start { display: block; } html[data-mk-step="2"] .mk-start, html[data-mk-step="3"] .mk-start { display: none; } }
#mk-app { scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.mk-head h1 { margin-top: var(--space-12); font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-body); letter-spacing: -.01em; }   /* page-title；跟其他台、文字頁同一條（10-25 第 3 輪評審：原本 768／1024 寬是 40／52px，其他台 34／45px） */
@media (max-width: 640px) { .mk-head h1 { font-size: 34px; } }   /* E 輪：手機各頁頁名統一 34px（原本 480 以下 32px，各頁 32／34／40／52 不一） */
/* 第 2、3 步：頁頭只留小標＋頁名，引言與三條費用說明收起（E 輪設計評審品味建議 7：第 2、3 步重複整段約 490px 的頁頭，「調風格」「複製」被推到第一屏外）。
   費用與帳號在第 1 步、第 3 步「到 Gemini 做歌要準備的」都寫了，就在離開本站的鈕旁邊 */
html[data-mk-step="2"] .mk-head :is(.lead, .mk-facts), html[data-mk-step="3"] .mk-head :is(.lead, .mk-facts) { display: none; }
html[data-mk-step="2"] .mk-head .wrap, html[data-mk-step="3"] .mk-head .wrap { padding-block: var(--space-24) 0; }
/* 第 2、3 步：頁首右側三點收成一行（網站主人 10-26 核准，E 第 5 輪評審品味 6）。第 1 步顯示完整的三點，這一行不出現 */
.mk-head .mk-facts-1 { display: none; }
html[data-mk-step="2"] .mk-head .mk-facts-1, html[data-mk-step="3"] .mk-head .mk-facts-1 { display: block; margin-top: var(--space-8); font-size: 16px; line-height: 1.6; color: var(--ink-2); }
/* 第 3 步第 2 小步：Google 長度與模型的說明收進可展開的一段（網站主人 10-26 核准） */
.mk-go-t details.mk-go-more { margin-top: 0; }
.mk-go-more > p { margin-top: var(--space-6); }
/* summary 是 flex，瀏覽器的三角形不見了：自己畫一個箭頭（收起朝右、打開朝下），看得出來可以點開 */
.mk-go-more > summary::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0 var(--space-10) 0 var(--space-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.mk-go-more[open] > summary::before { transform: rotate(45deg); }
html[data-mk-step="2"] .mk-head h1, html[data-mk-step="3"] .mk-head h1 { margin-top: var(--space-6); }
.mk-head .lead { margin-top: var(--space-14); font-size: 18px; line-height: 1.7; color: var(--ink); max-width: 34em; }   /* lead-text；這頁做什麼＝主要文字 */
.mk-facts { list-style: none; margin: 0; padding: 0 0 0 var(--space-24); display: grid; gap: var(--space-12); border-left: 1px solid var(--line); }
@media (max-width: 900px) { .mk-facts { padding: var(--space-14) 0 0; border-left: 0; border-top: 1px solid var(--line); } }
.mk-facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--space-10); align-items: start; font-size: 17px; line-height: 1.6; color: var(--ink); }   /* body：長輩說小字差點漏掉，這三句用內文大小 */
.mk-facts li > .gl { width: 22px; height: 22px; margin-top: calc(var(--space-6) / 2); color: var(--ink-2); }
.mk-facts li > div { display: grid; justify-items: start; gap: var(--space-8); }

/* ---------- 共用 ---------- */
/* 以詞換行：外框在詞與詞之間插 <wbr>，設計系統只替 h1～h3、p、li 開 keep-all；這頁很多說明字在 span、b、dd、label 裡，一起開（一個詞太長還是會斷，不會撐破） */
/* overflow-wrap 用 anywhere、不用 break-word：讀者打的長句子（中間沒有標點、沒有空白）break-word 不會縮小最小內容寬度，格線欄被撐寬、整頁橫捲
   （E 輪介面規範審查 H1：320 寬打 24 字的句子，到第 3 步整頁 403 寬）。p、li、標題也一起蓋過設計系統的 break-word（單子標題、手機摘要也有讀者打的字） */
:is(.mk-head, .mk-app) :is(h2, h3, p, li, span, b, dt, dd, label, small) { word-break: keep-all; overflow-wrap: anywhere; }
.mk-app { padding-bottom: var(--space-48); }
a.mk-occ-b, a.mk-feat-b, a.mk-stp { text-decoration: none; }   /* 換畫面的連結（可以開新分頁），長得跟按鈕一樣 */
@media (max-width: 760px) { .mk-app { padding-bottom: calc(var(--space-48) + var(--space-52)); } }
.mk-h2 { margin-top: var(--space-8); font: 700 40px/1.2 var(--font-body); letter-spacing: -.01em; }   /* section-title；窄螢幕換下一級 */
@media (max-width: 900px) { .mk-h2 { font-size: 32px; } }
@media (max-width: 480px) { .mk-h2 { font-size: 26px; } }
.mk-h2:focus { outline: none; }   /* 換步驟時程式把焦點放在標題（讀屏從這裡念）；標題本身不能按，不畫框 */
.mk-step-head { margin-top: var(--space-28); }
.mk-step-lead { margin-top: var(--space-10); max-width: 42em; color: var(--ink-2); }
.mk-intro { color: var(--ink-2); font-size: 16px; line-height: 1.7; max-width: 46em; }   /* body-small */
.mk-note { margin-top: var(--space-14); font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 46em; }   /* fine-print */
.mk-hint { font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.mk-sub { margin-top: var(--space-26); }
.mk-sub-h { margin: 0 0 var(--space-10); display: flex; align-items: center; gap: var(--space-8); font: 700 17px/1.3 var(--font-body); color: var(--ink); }   /* body 粗體：小節名 */
.mk-n { font: 400 12px/1 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* mono-label */
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-12); }
/* 膠囊鈕：照設計系統 .set-more 的樣子（line-strong 外框、15px 粗體、44px 高）；「文字＋箭頭」的連結與小動作一律用它，看起來就是按鈕（主控 10-21 全站一致） */
.mk-pill { display: inline-flex; align-items: center; justify-content: 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.2 var(--font-body); text-decoration: none; text-align: left; cursor: pointer; }
@media (hover: hover) { .mk-pill:hover { border-color: var(--ink); } }   /* 滑鼠才有：手機點過以後「滑過」的樣子會卡住，看起來像第三種狀態 */
.mk-pill .gl { width: 16px; height: 16px; }
.mk-pill[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
/* 連到 Google 的膠囊鈕（make.js outPill）：「（會離開本站）」平常寫在鈕裡；放鈕的那一欄不到 300px 寬（一整句放不下）時，鈕裡那段只留給讀屏，
   改在鈕下面一行小字（E 輪設計評審 M6：320 寬鈕裡的字斷成兩行，膠囊形破掉；第 3 步「到 Gemini」在 480 以下的窄欄也一樣）。看的是欄寬（容器查詢），不是螢幕寬 */
.mk-out { display: grid; justify-items: start; justify-self: stretch; gap: var(--space-4); container-type: inline-size; }
.mk-out > .mk-pill { position: relative; }
.mk-leave-note { display: none; padding-left: var(--space-16); font-size: 13px; line-height: 1.4; color: var(--ink-2); }   /* caption；跟鈕裡的字對齊 */
@container (max-width: 299px) {
  .mk-leave { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mk-leave-note { display: block; }
}
.btn .gl { width: 1.1em; height: 1.1em; }
.mk-intro > .gl, .mk-step-lead > .gl { display: inline-block; width: 1em; height: 1em; margin-inline: var(--space-4); vertical-align: -0.12em; }   /* 說明裡的播放鍵：跟按鈕上同一個 SVG 三角形 */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.mk-en { font: 400 14px/1.5 var(--font-body-en); color: var(--ink-2); overflow-wrap: anywhere; }   /* fine-print：要貼給 AI 的英文關鍵字。10-24 六頁評審：等寬字是給頻率與時間用的，13px 等寬灰字長輩讀起來吃力 → 內文英文字型 */
@media (pointer: coarse), (max-width: 640px) { .btn { min-height: var(--tap-min); } }

/* 選項膠囊：設計系統 Chip，當「選項」用時放大到 ui-label 字級、40px 高（手機 44px）；有小字說明時排兩行 */
.mk-chip { font: 700 15px/1.25 var(--font-body); min-height: 40px; padding: var(--space-8) var(--space-14); gap: var(--space-6); text-align: left; }
.mk-chip small { font: 400 13px/1.4 var(--font-body); color: var(--ink-2); }   /* caption */
.mk-chip:has(small) { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-4); border-radius: var(--radius-14); }
.mk-chip[aria-pressed="true"] small, .mk-chip[aria-pressed="true"] .mk-n { color: var(--on-amber); }
.mk-chip .gl { width: 16px; height: 16px; }
@media (pointer: coarse), (max-width: 640px) { .mk-chip { min-height: var(--tap-min); } }
.mk-xp { display: inline-block; margin-left: var(--space-6); padding: 0 var(--space-6); border: 1px solid currentColor; border-radius: var(--radius-pill); font: 700 12px/1.5 var(--font-body); vertical-align: 1px; }   /* 「實驗」：官方沒列的說法（字色跟著所在的字） */
.mk-chip .mk-xp { font-size: 12px; }

/* ---------- 步驟列（新元件）：電腦在上面，像三個電台；手機固定在底部五台上面，像迷你播放列 ---------- */
.mk-stepbar ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
/* 上緣：三步都有一條細的底軌（line，畫在透明的 3px 上框底下），現在這一步再把上框塗成墨色——粗線落在底軌上，不會看起來是浮在大標旁邊的孤線（E 第 2 輪評審 M3） */
.mk-stp { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-12); row-gap: var(--space-4); align-items: baseline; padding: var(--space-14) var(--space-10) var(--space-14) var(--space-4); border: 0; border-top: 3px solid transparent; background: linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat border-box; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
/* 第 2、3 步頁頭只剩小標＋頁名（下緣 0）：步驟列跟大標之間留 space-44（大標的字框比行高多出 7～9px，留 24 會被吃掉；E 第 2 輪評審 M3 量到粗線壓在大標那一行） */
html[data-mk-step="2"] .mk-stepbar, html[data-mk-step="3"] .mk-stepbar { margin-top: var(--space-44); }
.mk-stp-n { grid-row: span 2; font: 800 30px/1 var(--font-display); color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* freq-number */
.mk-stp-t { font: 700 17px/1.25 var(--font-body); }
.mk-stp-d { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.mk-stp[aria-current] { border-top-color: var(--ink); }   /* 現在這一步：上緣一條墨色粗線（10-24 六頁評審：步驟不是電台，紅色只留給主按鈕與選中電台） */
.mk-stp[aria-current] .mk-stp-n { color: var(--ink); }
.mk-stp[aria-disabled="true"] { cursor: not-allowed; }
.mk-stp[aria-disabled="true"] .mk-stp-t { color: var(--ink-2); }
@media (hover: hover) { .mk-stp:hover:not([aria-current]):not([aria-disabled="true"]) .mk-stp-t { text-decoration: underline; text-underline-offset: 4px; } }
/* 手機（三步都一樣，跟著頁面捲）：三格很窄，號碼與步驟名縮小；能去的步驟不放說明，鎖住的才寫「先選場合」。
   E 第 2 輪評審 M2 之前，第 2、3 步是一條固定在底部五台上面的深色玻璃列（跟電台列一樣深、一眼分不清），現在跟第 1 步同一個樣子 */
@media (max-width: 760px) {
  .mk-stp { column-gap: var(--space-6); }
  .mk-stp-n { font-size: 22px; }
  .mk-stp-t { font-size: 15px; }
  .mk-stp:not([aria-disabled="true"]) .mk-stp-d { display: none; }
  html[data-mk-step="2"] .mk-stepbar, html[data-mk-step="3"] .mk-stepbar { margin-top: calc(var(--space-28) + var(--space-4)); }   /* 手機頁名 34px：字框多出的比電腦少（量到粗線離大標字底 26px） */
}
/* 360 以下：號碼放在步驟名上面（三格各 96px，號碼排在旁邊時「給 Gemini」只剩 66px、斷成兩行；E 輪設計評審 M6） */
@media (max-width: 359px) {
  .mk-stp { grid-template-columns: minmax(0, 1fr); }
  .mk-stp-n { grid-row: auto; }
}

/* ---------- ① 選場合 ---------- */
.mk-resume { margin-top: var(--space-24); padding-block: var(--space-14); border-block: 1px solid var(--line); display: grid; gap: var(--space-10); }
.mk-resume p { font-size: 17px; }
.mk-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-14); margin-top: var(--space-22); }
@media (max-width: 760px) { .mk-feat { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }
.mk-feat-b { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: var(--space-14); align-items: center; width: 100%; min-height: 76px; padding: var(--space-12) var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-14); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mk-feat-b > span { display: grid; gap: var(--space-4); }
.mk-feat-b b { font: 700 17px/1.3 var(--font-body); }
.mk-feat-b > span > span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print（只管說明那一行：以詞換行會在標題裡插 .nw 的 span） */
.mk-feat-b > .gl { width: 20px; height: 20px; }
@media (hover: hover) { .mk-feat-b:hover, .mk-occ-b:hover { border-color: var(--ink); background: var(--panel); } .mk-tile-main:hover:not([aria-pressed="true"]) { background: var(--panel); } }
.mk-filter { margin-top: var(--space-24); }
.mk-grp { margin-top: var(--space-28); }
.mk-grp-h { display: flex; align-items: baseline; gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 2px solid var(--ink); font: 700 17px/1.3 var(--font-body); color: var(--ink); }   /* 樂器架的類名＋粗底線 */
.mk-grp-h .mono { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.mk-grp-tip { margin: var(--space-8) 0 var(--space-12); font-size: 14px; color: var(--ink-2); }
.mk-all-tip { margin: var(--space-14) 0 0; font-size: 15px; color: var(--ink); }   /* 「全部」上面那句：畢業、謝師在哪一組（讀者從「全部」往下滑會以為沒有） */
/* 場合鍵（新元件）：線條圖示＋名字＋一句說明，整格是一顆按鈕；右上一顆播放鍵聽配樂範例（兩顆獨立按鈕，不巢狀） */
/* 「正在播」的說明（li.mk-now）與就地確認（li.mk-occ-ask）是整列寬的另外一列：dense 讓同一列後面的卡片補回原位，說明排在那一列下面
   （E 輪設計評審 M1：原本塞在卡片那一格，整列被撐到約 240px、別張卡的播放鍵跑到框外） */
/* E 第 4 輪評審品味 6（第 3 輪品味 2）：41 張方框卡 → 細線分隔的列表（taste.md「細線分隔取代框與底色」；首頁「五個電台」同一種語言）。
   每個場合一列：圖示、名稱、一句說明、右側播放鍵；列與列之間一條 line。電腦、平板兩欄，手機一欄 */
.mk-occs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 0 var(--space-28); }
@media (max-width: 640px) { .mk-occs { grid-template-columns: minmax(0, 1fr); } }
.mk-occs > .mk-now, .mk-occs > .mk-occ-ask { grid-column: 1 / -1; }
.mk-occs > .mk-occ-ask > .mk-askbox { margin-top: 0; }
/* 卡框撐滿那一格（格子本來就等高，原本 align-content: start 讓框只有內容高；E 輪設計評審 M2：同一列卡片高低不齊） */
.mk-occ { position: relative; display: grid; }
.mk-occ-b { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: var(--space-12); align-items: center; width: 100%; height: 100%; min-height: 72px; padding: var(--space-12) var(--space-4); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mk-occ:has(.mk-ex) .mk-occ-b { padding-right: calc(var(--space-12) + 48px); }
.mk-occ .mk-play { right: var(--space-4); }   /* 細線列表沒有框：播放鍵靠右對齊列尾 */
.mk-occ-b .ic { width: 42px; height: 42px; }
.mk-occ-t { display: grid; gap: var(--space-4); min-width: 0; }
.mk-occ-t b { font: 700 17px/1.3 var(--font-body); }
.mk-occ-t > span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print（只管說明那一行） */
.mk-occ .mk-ex { top: 50%; margin-top: calc(var(--space-18) * -1); }   /* 那一格只有卡框（說明、確認都在另一列），50% 就是卡框正中間 */
@media (pointer: coarse) { .mk-occ .mk-ex { margin-top: calc(var(--space-22) * -1); } .mk-occ:has(.mk-ex) .mk-occ-b { padding-right: calc(var(--space-12) + 52px); } }
.mk-now { display: grid; gap: var(--space-8); justify-items: start; padding: var(--space-4) var(--space-4) var(--space-8); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.mk-now[hidden] { display: none; }

/* 播放圓鈕（設計系統 IconButton 的樣子，電腦 36px、觸控 44px）：播放中亮琥珀、圖示換成 ■ */
.mk-play { position: absolute; top: var(--space-8); right: var(--space-8); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink); cursor: pointer; z-index: 1; }
@media (hover: hover) { .mk-play:hover { border-color: var(--ink); } }
.mk-play .gl { width: 15px; height: 15px; }
.mk-play[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
@media (pointer: coarse) { .mk-play { width: 44px; height: 44px; } }

/* ---------- ② 調風格 ---------- */
.mk-occhead { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-8) var(--space-18); align-items: center; margin-top: var(--space-28); }
.mk-occhead > .ic { width: 56px; height: 56px; }
.mk-occhead-t p:last-child { margin-top: var(--space-4); color: var(--ink-2); }
.mk-occhead-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); }
.mk-occhead .mk-now { grid-column: 1 / -1; padding-inline: 0; }
@media (max-width: 760px) { .mk-occhead { grid-template-columns: 44px minmax(0, 1fr); } .mk-occhead > .ic { width: 44px; height: 44px; } .mk-occhead-b { grid-column: 1 / -1; justify-content: flex-start; } }
.mk-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: var(--space-28) var(--space-44); align-items: start; margin-top: var(--space-22); }
@media (max-width: 1080px) { .mk-work { grid-template-columns: minmax(0, 1fr); } }
.mk-side { position: sticky; top: calc(var(--header-height) + var(--space-16)); max-height: calc(100vh - var(--header-height) - var(--space-28)); display: grid; grid-template-rows: minmax(0, 1fr) auto; }   /* 電腦：單子跟著你，選什麼就看到它即時改；太長就在自己的框（.mk-side-in）裡捲 */
.mk-side-in { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-4) 0; }
/* 下面還有字（make.js 的 sideMore 加 .is-more）：框底 28px 漸淡（遮罩只看透明度，用 ink 當不透明的那一端）＋一行「共 N 句，往下捲看全部」；捲到底兩個都收起。
   E 第 2 輪評審 M5：原本 1280×800 最底那一行英文被切在字的中間，捲軸自動隱藏的電腦看不出這一塊可以捲 */
.mk-side.is-more .mk-side-in { -webkit-mask-image: linear-gradient(to bottom, var(--ink) calc(100% - var(--space-28)), transparent); mask-image: linear-gradient(to bottom, var(--ink) calc(100% - var(--space-28)), transparent); }
.mk-side-more { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding-top: var(--space-6); font-size: 13px; line-height: 1.4; color: var(--ink-2); visibility: hidden; }   /* caption；不在的時候也佔著這一行（顯示、收起時框高不變，才不會一收一放來回跳） */
.mk-side-more .gl { width: 14px; height: 14px; }
.mk-side.is-more .mk-side-more { visibility: visible; }
@media (max-width: 1080px) { .mk-side { display: none; } }   /* 平板、手機：整張單子在第 3 步看；這一步放下面那條「即時」摘要 */
/* 給 Gemini 的話・即時摘要（平板、手機）：幾句、有沒有要注意的、剛改的那一句 */
.mk-mini { display: none; }
@media (max-width: 1080px) {
  .mk-mini { display: grid; gap: var(--space-8); justify-items: start; margin-top: var(--space-28); }
  .mk-mini .mk-sub-h { margin: var(--space-4) 0 0; }
  .mk-mini-last { font-size: 15px; line-height: 1.6; color: var(--ink); }
  .mk-mini-last b { color: var(--ink-2); font-weight: 700; margin-right: var(--space-6); }
}

/* 選項分頁籤（新元件）：十格有框的按鈕，每格寫名稱＋現在的值；選中的那格墨色底；改過的有一顆琥珀點（外圈墨色，淺色底上也看得到） */
/* E 第 4 輪評審品味 6（第 3 輪品味 2）：10 個方框 → 細線分隔（每格底下一條 line）；選中的那格底下一條墨色粗線（跟步驟列「現在這一步」同一種記號），不再整格墨色底 */
.mk-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--space-12); }
@media (max-width: 1240px) and (min-width: 1081px) { .mk-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mk-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-tab { display: grid; gap: var(--space-4); align-content: start; min-height: 64px; padding: var(--space-10) var(--space-4); border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mk-tab-n { display: flex; align-items: center; gap: var(--space-6); font: 700 15px/1.25 var(--font-body); }   /* ui-label */
.mk-tab-v { font-size: 14px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* fine-print：現在的值 */
@media (hover: hover) { .mk-tab:hover:not([aria-selected="true"]) { border-color: var(--ink); background: var(--panel); } }
.mk-tab[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); color: var(--ink); }   /* 3px 粗線用 inset 陰影畫：不改格子高度，換分頁時版面不跳 */
.mk-tab[aria-selected="true"] .mk-tab-v { color: var(--ink); }
.mk-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1.5px var(--on-amber); }
.mk-panel { margin-top: var(--space-24); min-height: 240px; }
.mk-panel:focus { outline: none; }
/* 分頁內容最上面的分頁名稱（E 第 5 輪評審品味 8）：手機點了分頁籤，頁面捲到內容開頭，分頁列已經捲出畫面，這一行告訴讀者現在在哪一頁。電腦看得到分頁列，不顯示 */
.mk-panel-h { display: none; }
@media (max-width: 760px) { .mk-panel-h { display: block; margin: 0 0 var(--space-10); font: 700 17px/1.3 var(--font-body); color: var(--ink); } }
.mk-panel > .mk-chips, .mk-panel > .seg { margin-top: var(--space-14); }
.mk-reset { margin-top: var(--space-28); padding-top: var(--space-14); border-top: 1px solid var(--line); }
.mk-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-12); margin-top: var(--space-28); padding-top: var(--space-18); border-top: 1px solid var(--line); }
.mk-seg { margin-top: var(--space-6); }
.mk-seg button { min-height: var(--tap-min); }   /* 原本 40px 蓋掉設計系統手機 44px（六頁評審 10-24 必修） */

/* 選項方塊（新元件）：中文名＋英文關鍵字＋一句白話；選中亮琥珀；右上播放鍵＝15 秒示範 */
/* 小事修正 10-26（第 5、6 輪品味：40 多張 1.5px 框、14px 圓角的方塊）→ 跟第 1 步場合清單同一種細線列：
   每個選項一列（名稱＋一句說明＋右側播放鍵），列與列之間一條 line；電腦、平板兩欄，手機一欄。選中＝琥珀底＋墨色外框（全站規則） */
.mk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-28); }
@media (max-width: 640px) { .mk-tiles { grid-template-columns: minmax(0, 1fr); } }
.mk-tile { position: relative; min-width: 0; display: grid; padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.mk-tile-main { display: grid; gap: var(--space-4); align-content: center; width: 100%; height: 100%; min-height: 60px; padding: var(--space-8) var(--space-10); border: 1.5px solid transparent; border-radius: var(--radius-6); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mk-tile.has-play .mk-tile-main { padding-right: calc(var(--space-12) + 40px); }   /* 播放鍵 36px 靠右、垂直置中，名字和說明不壓到它 */
@media (pointer: coarse) { .mk-tile.has-play .mk-tile-main { padding-right: calc(var(--space-12) + 48px); } }   /* 觸控：播放鍵 44px */
.mk-tile .mk-play { top: 50%; right: var(--space-4); margin-top: calc(var(--space-18) * -1); }
@media (pointer: coarse) { .mk-tile .mk-play { margin-top: calc(var(--space-22) * -1); } }
.mk-tile-in { display: block; min-width: 0; }
.mk-tile-in > b, .mk-tile-in > .mk-tip { display: block; }
.mk-tile-in > * + * { margin-top: var(--space-2); }
.mk-tile-main b { font: 700 16px/1.35 var(--font-body); }   /* body-small 粗體 */
.mk-tile-main .mk-en { font-size: 13px; line-height: 1.4; }   /* caption：英文原名（預設收起，按「顯示英文原名」才出現） */
.mk-entoggle { margin-block: var(--space-12) var(--space-14); }   /* 下緣 14：人聲分頁緊接著選項方塊，原本間距 0（E 輪設計評審 M5）；曲風分頁下面的間距本來就是 14（上下外距合併，不會變 28） */
@media (max-width: 359px) { .mk-tiles { grid-template-columns: minmax(0, 1fr); } }   /* 320 寬兩欄時名字只剩半格寬，「合成器流行」「Lo-Fi 嘻哈」最後一行只剩兩個字 */
.mk-tile-k { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }   /* 英文關鍵字＋「實驗」（實驗講的是這個關鍵字不在官方清單裡，所以貼在它旁邊） */
.mk-tile-k .mk-xp { margin-left: 0; }
.mk-tile-main .mk-tip { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print：白話說明 */
/* 選中＝琥珀底加墨色外框（全站規則，shell.css 的 .chip／.opt 同一條；E 第 6 輪評審 M6-2：方塊原本是琥珀框，日間對頁面底只有 2.33:1，比沒選的還淡） */
.mk-tile-main[aria-pressed="true"] { background: var(--amber); border-color: var(--ink); color: var(--on-amber); }
.mk-tile-main[aria-pressed="true"] .mk-en, .mk-tile-main[aria-pressed="true"] .mk-tip { color: var(--on-amber); }
.mk-fam { margin-bottom: var(--space-12); }

/* 已選的樂器：名字貼在紙膠帶上（設計系統：樂器名用紙膠帶），第一個是主奏 */
.mk-sel { list-style: none; margin: 0; padding: 0; display: grid; }
.mk-sel-i { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.mk-sel-i:last-child { border-bottom: 1px solid var(--line); }
.mk-sel-n { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-10); min-width: 0; }
.mk-tape { background: var(--tape); color: var(--tape-ink); font-weight: 700; padding: 0 var(--space-8); border-radius: var(--radius-2); transform: rotate(-1.2deg); }
.mk-sel-i:nth-child(3n+2) .mk-tape { transform: rotate(.8deg); } .mk-sel-i:nth-child(3n) .mk-tape { transform: rotate(-.4deg); }
.mk-lead { font: 700 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--ink); }   /* mono-label：主奏。小事修正 10-26（第 6 輪「給網站主人參考」）：原本 red-ink；它是狀態標籤不是小標，紅色只給錄音、正在播、每畫面一顆主按鈕 → 墨色粗體 */
.mk-sel-b { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* 文字欄（新元件）：設計系統的下拉選單同一套框（line-strong 1.5px），圓角 12、字 17px */
.mk-field { display: grid; gap: var(--space-6); margin-top: var(--space-18); max-width: 44em; }
.mk-field > label { font: 700 16px/1.4 var(--font-body); color: var(--ink); }
.mk-input { 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: 17px/1.5 var(--font-body); }   /* body */
.mk-input::placeholder { color: var(--ink-2); opacity: 1; }
@media (hover: hover) { .mk-input:hover { border-color: var(--ink); } }
textarea.mk-input { resize: vertical; }
.mk-lyrics { min-height: 240px; }
.mk-num { max-width: 10em; }
.mk-check { display: flex; align-items: flex-start; gap: var(--space-10); margin-top: var(--space-14); font: 700 16px/1.5 var(--font-body); cursor: pointer; }
.mk-check input { width: 22px; height: 22px; margin: 0; flex: none; }
.mk-check small { display: block; font: 400 14px/1.6 var(--font-body); color: var(--ink-2); }
.mk-tagbar { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.mk-tagbar .mk-chip { flex-direction: row; align-items: baseline; border-radius: var(--radius-pill); }
.mk-tagbar .mk-chip small { font-size: 12px; }
.mk-lyrq { margin-top: var(--space-18); display: grid; gap: var(--space-10); justify-items: start; padding-top: var(--space-14); border-top: 1px solid var(--line); }
.mk-lyrq p { color: var(--ink-2); font-size: 15px; max-width: 44em; }
.mk-lyrq p b { color: var(--ink); }
.mk-manual { display: grid; gap: var(--space-6); width: 100%; margin-top: var(--space-10); }
.mk-manual[hidden] { display: none; }
.mk-manual label { font-size: 15px; font-weight: 700; color: var(--red-ink); }
.mk-manual textarea { font: 13px/1.5 var(--font-mono); }
details.mk-more { margin-top: var(--space-24); }
details.mk-more > summary { cursor: pointer; font-weight: 700; min-height: var(--tap-min); display: flex; align-items: center; }

/* 情緒地圖（新元件）：深色操作台上的一塊 2D 平面，左難過右開心、上激昂下平靜；點一下（或方向鍵＋Enter）挑最接近的兩個 */
.mk-padwrap { display: grid; gap: var(--space-8); max-width: 560px; margin-top: var(--space-14); }
.mk-pad { position: relative; aspect-ratio: 16 / 11; background: var(--glass); color: var(--glass-ink); border: 1.5px solid var(--glass-edge); border-radius: var(--radius-14); cursor: crosshair; touch-action: manipulation; overflow: hidden; }   /* 外框 glass-edge：夜間地圖邊界才看得見（10-24 六頁評審） */
.mk-pad:focus-visible { outline-color: var(--glass-red-ink); outline-offset: 3px; }
.mk-pad-x, .mk-pad-y { position: absolute; background: var(--glass-rule); }
.mk-pad-x { left: var(--space-12); right: var(--space-12); top: 50%; height: 1px; }
.mk-pad-y { top: var(--space-12); bottom: var(--space-12); left: 50%; width: 1px; }
.mk-ax { position: absolute; z-index: 1; padding: 0 var(--space-4); border-radius: var(--radius-6); background: var(--glass); font: 700 14px/1.2 var(--font-body); color: var(--glass-dim); }   /* fine-print；底色跟地圖一樣：十字軸線從字後面過去，不會壓在字上 */
.mk-ax-l { left: var(--space-10); bottom: var(--space-10); } .mk-ax-r { right: var(--space-10); bottom: var(--space-10); }   /* 左右的軸名放在下面兩個角、加箭頭（10-24：放在橫軸旁邊會跟「明亮」「陰暗」疊在一起） */
.mk-ax-t { top: var(--space-10); left: 50%; transform: translateX(8px); } .mk-ax-b { bottom: var(--space-10); right: 50%; transform: translateX(-8px); }   /* 放在直軸左邊：右邊是「空靈」 */
.mk-pad-w { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--glass); font-size: 14px; line-height: 1.3; color: var(--glass-text-2); white-space: nowrap; pointer-events: none; }   /* fine-print 14px（10-24 六頁評審：原本 12～13px）；地圖同色底：軸線經過時從字後面過去 */
.mk-pad-w.on { padding: 0 var(--space-6); border-radius: var(--radius-pill); background: var(--amber); color: var(--on-amber); font-weight: 700; z-index: 2; }
.mk-pin { position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--glass-ink); pointer-events: none; z-index: 3; }
.mk-pin[hidden] { display: none; }
@media (max-width: 640px) { .mk-pad-w.more:not(.on) { display: none; } }   /* 手機只放 12 個代表詞（make.js 的 CORE）；選中的詞照樣顯示 */
.mk-why { list-style: none; margin: var(--space-18) 0 0; padding: 0; display: grid; gap: var(--space-6); }
.mk-why li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8); font-size: 15px; }

/* 速度：大數字＋拉桿＋快慢鈕（設計系統 Stepper），旁邊一顆「聽聽看這個速度」（真錄音的節拍器） */
.mk-bpm { display: grid; gap: var(--space-12); margin-top: var(--space-18); max-width: 560px; }
.mk-bpm-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); }
.mk-bpm-n { font: 800 40px/1 var(--font-display); font-variant-numeric: tabular-nums; }   /* stat */
.mk-bpm-u { font: 700 15px/1 var(--font-body); }
.mk-bpm-f { font-size: 15px; color: var(--ink-2); }
.mk-bpm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); }
.mk-bpm-row input[type="range"] { width: 100%; min-height: var(--tap-min); accent-color: var(--ink); }
.mk-bpm .stepper button { display: grid; place-items: center; }
.mk-bpm .stepper .gl { width: 16px; height: 16px; }
.mk-met { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-14); }
.mk-beats { display: inline-flex; gap: var(--space-8); }
.mk-beats i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.mk-beats i:first-child { border-color: var(--ink); }   /* 第一拍（大鼓）的框深一點 */
.mk-beats i.on { background: var(--amber); border-color: var(--on-amber); }   /* 正在響的那一拍：琥珀＋墨色外框（淺色底上琥珀只有 2.3:1，靠外框到 3:1 以上） */

/* 時間軸：設計系統 TrackList 的深色音軌，每一段一塊琥珀方塊；有影片時方塊可以按（從那一秒播） */
.mk-ol { margin: 0; padding-left: var(--space-22); display: grid; gap: var(--space-6); max-width: 46em; }
.mk-vid { margin-top: var(--space-18); display: grid; gap: var(--space-10); }
.mk-video { display: block; width: 100%; max-height: 380px; background: var(--glass); border-radius: var(--radius-10); }
.mk-drop { margin-top: var(--space-18); display: grid; gap: var(--space-8); justify-items: start; padding: var(--space-18); border: 2px dashed var(--line-strong); border-radius: var(--radius-14); cursor: pointer; }
.mk-drop.over { border-color: var(--ink); background: var(--panel); }
.mk-drop:focus-within .mk-drop-b, .mk-filebtn:focus-within { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.mk-filebtn { cursor: pointer; }
.mk-lane { margin-top: var(--space-22); }
/* 空的時間軸：每 15 秒一格刻度、整分鐘長一點＋一句從哪裡開始（E 輪設計評審品味建議 10） */
.mk-tick { position: absolute; bottom: 0; width: 1px; height: var(--space-8); background: var(--glass-dim); pointer-events: none; }   /* 刻度用 glass-dim（設計系統：次要字與刻度）；glass-rule 在深色面板上幾乎看不見 */
.mk-tick.major { width: 2px; height: var(--space-14); }
.mk-lane-empty { display: flex; align-items: center; padding-inline: var(--space-12); }
.mk-lane-tip { position: relative; z-index: 1; font-size: 14px; line-height: 1.3; color: var(--glass-dim); }   /* fine-print；手機寬換兩行（音軌 44px 高放得下） */
.mk-blk { position: absolute; top: var(--space-6); bottom: var(--space-6); display: flex; align-items: center; min-width: 0; padding: 0 var(--space-6); border: 0; border-left: 2px solid var(--glass); background: var(--amber); color: var(--on-amber); font: 700 13px/1 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* caption */
button.mk-blk { cursor: pointer; }
button.mk-blk:focus-visible { outline: 3px solid var(--glass-red-ink); outline-offset: -3px; }
.mk-head-line { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--glass-red-line); opacity: 0; pointer-events: none; }
.mk-head-line.on { opacity: 1; }
.mk-axis { display: flex; justify-content: space-between; margin-top: var(--space-6); font: 400 12px/1 var(--font-mono); color: var(--ink-2); }   /* mono-label */
.mk-tl-head { display: grid; grid-template-columns: 6.5em 12em minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-22); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.mk-tl { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-8); }
.mk-tl-row { display: grid; grid-template-columns: 6.5em 12em minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; }
.mk-tl-row select { min-height: var(--tap-min); max-width: 100%; }
.mk-tl-b { display: flex; gap: var(--space-6); }
.mk-tl-t { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .mk-tl-head { display: none; }
  .mk-tl-row { grid-template-columns: 6.5em minmax(0, 1fr); padding-bottom: var(--space-10); border-bottom: 1px solid var(--line); }
  .mk-tl-row .mk-tl-d, .mk-tl-row .mk-tl-b { grid-column: 1 / -1; }
}
.mk-tl-end { grid-template-columns: auto minmax(0, 8em) auto; align-items: center; }
@media (max-width: 640px) { .mk-tl-end { grid-template-columns: minmax(0, 1fr); } }
.mk-tl-end + .mk-actions { margin-top: var(--space-14); }

/* ---------- 給 Gemini 的話（設計系統 RequestSlip：撕下來的一張，上緣虛線，不放底色） ---------- */
.mk-slip-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8); }
.mk-slip .mk-sub-h, .mk-slip .mk-slip-h { scroll-margin-top: calc(var(--header-height) + var(--space-16)); }
.mk-slip .mk-slip-h:focus { outline: none; }   /* 「先看要貼的內容」把焦點放在單子標題（讀屏從這裡念）；標題不能按，不畫框 */   /* 「看全部建議」捲到檢查結果時，不躲在頁首底下 */
.mk-slip .mk-slip-h { margin-top: var(--space-10); font: 700 22px/1.3 var(--font-body); }   /* item-title */
.mk-slip-meta { margin-top: var(--space-4); font-size: 14px; color: var(--ink-2); }
.mk-slip-how { margin-top: var(--space-10); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
/* 右欄最上面：檢查結果一行摘要＋「複製」（E 輪設計評審 M4）；上下各一條分隔線，不加底色 */
.mk-slip-sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); margin-top: var(--space-12); padding-block: var(--space-10); border-block: 1px solid var(--line); }
.mk-slip-sum .mk-warnline { flex: 1 1 100%; font-size: 15px; }   /* 摘要一行、兩顆鈕在下一行（右欄 390px，擠在同一行時摘要斷成兩行） */
.mk-slip-sum .mk-warnline .gl { margin-top: var(--space-3); }
/* 手機、平板第 2 步：即時摘要裡「在這裡看全部」（E 輪設計評審品味建議 8） */
details.mk-mini-all { width: 100%; margin-top: 0; }
.mk-mini-all > .mk-lines { margin-top: var(--space-6); }
.mk-mini-all:not([open]) > .mk-lines { display: none; }   /* 收起時明寫不排版：Chrome 收起的 details 內容照樣有位置，量對比的工具會量到看不見的字 */
.mk-slip-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-12); }
.mk-lines > li.mk-line { grid-template-columns: 5.5em minmax(0, 1fr); align-items: baseline; gap: var(--space-10); padding-block: var(--space-10); }
.mk-line .step { font-size: 14px; line-height: 1.5; }   /* fine-print 粗體：這一句在講什麼 */
.mk-line .t { display: grid; gap: var(--space-4); min-width: 0; }
.mk-line .mk-en { padding-left: var(--space-10); border-left: 2px solid var(--line-strong); font-size: 15px; line-height: 1.6; }   /* 要貼的原文：內文英文字型 15px、ink-2，左邊一條細線表示「這是原文」（10-24 六頁評審） */
.mk-zh { font-size: 16px; line-height: 1.6; color: var(--ink); }   /* body-small */
.mk-line { position: relative; isolation: isolate; }
.mk-line.fresh { box-shadow: inset 3px 0 0 var(--amber); }   /* 剛改的那一句：左邊一條琥珀線＋淡淡亮一下（只動透明度；減少動態時只留線） */
.mk-line.fresh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--amber) 32%, transparent); opacity: 0; pointer-events: none; animation: mk-fresh 1.6s ease-out; }
@keyframes mk-fresh { from { opacity: 1; } to { opacity: 0; } }
.mk-lyr { margin: var(--space-10) 0 0; padding: var(--space-12) 0; border-top: 1px solid var(--line); white-space: pre-wrap; font: 15px/1.7 var(--font-body); color: var(--ink); }
.mk-slip > .mk-sub-h { margin-top: var(--space-22); }
.mk-checks { list-style: none; margin: 0; padding: 0; display: grid; }
.mk-ck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6) var(--space-10); align-items: baseline; padding-block: var(--space-10); border-top: 1px solid var(--line); }
.mk-ck-h { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 14px; white-space: nowrap; }
.mk-ck-h .gl { width: 16px; height: 16px; align-self: center; }
.mk-ck.error .mk-ck-h { color: var(--red-ink); }
.mk-ck.info .mk-ck-h { color: var(--ink-2); }
.mk-ck-t { font-size: 15px; line-height: 1.6; }
.mk-ck .mk-chip { grid-column: 2; justify-self: start; }
.mk-checks:focus, .mk-ok:focus { outline: none; }
.mk-ok { display: flex; align-items: center; gap: var(--space-8); padding-block: var(--space-10); border-top: 1px solid var(--line); font-size: 15px; }
/* 第 3 步單子底下：不再放第二顆「複製」，手機、平板改成「↑ 回到複製鈕」；電腦單子就在複製鈕正下方，不用（E 第 3 輪評審 M-2） */
.mk-backtop { margin-top: var(--space-18); }
.mk-backtop .gl { width: 16px; height: 16px; }
@media (min-width: 1081px) { .mk-backtop { display: none; } }
/* 紅色複製鈕下面的小提示（「歌詞要講什麼」還空著時）：不帶警告符號、fine-print 灰字；「回第 2 步」是行內連結（用 <a>：按鈕在 Chrome 是一整塊，不能跟句子一起換行）（E 第 3 輪評審 M-1） */
.mk-tipline { max-width: 40em; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.mk-textbtn { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-align: left; cursor: pointer; }
@media (hover: hover) { .mk-textbtn:hover { color: var(--red-ink); } }
@media (pointer: coarse) { .mk-textbtn { padding-block: var(--space-12); } }   /* 觸控：上下各 12px 的透明內距，可點範圍約 46px 高；行內元素的內距不撐開行高，句子照樣排成一段 */

/* ---------- ③ 給 Gemini ---------- */
.mk-copybox { margin-top: var(--space-22); display: grid; gap: var(--space-10); justify-items: start; }
.mk-copybox .btn-main { font-size: 18px; padding: var(--space-16) var(--space-28); }   /* 這一步最重要的一顆：比一般按鈕大一號（lead-text 字級） */
.mk-toslip .gl { width: 16px; height: 16px; }
@media (min-width: 1081px) { .mk-toslip { display: none; } }   /* 電腦：單子就在右邊同一屏，不用跳；平板、手機單子在三步圖解下面才需要 */
.mk-need li > .mk-need-link { grid-column: 2; justify-self: stretch; }   /* 外面那一層 .mk-out 是容器查詢的容器（寬度不能跟著內容縮），撐滿這一欄；鈕本身照樣靠左 */
.mk-warnline { display: flex; align-items: flex-start; gap: var(--space-8); font-size: 15px; line-height: 1.6; }
.mk-warnline .gl { flex: none; margin-top: var(--space-4); }
.mk-warnline b { margin-right: var(--space-4); }
/* 複製鈕上面的「建議先看一下」：第一個建議直接寫出來＋一鍵修正（不用讀者自己去下面找） */
.mk-warnbox { margin-top: var(--space-22); padding: var(--space-12) 0; border-block: 1px solid var(--line); display: grid; gap: var(--space-10); max-width: 46em; }
.mk-warnbox:focus { outline: none; }
/* 第 2 步：說明旁邊就有「下一步」（不想改的人不用滑到最下面找） */
.mk-lead-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-18); margin-top: var(--space-10); }
.mk-lead-row .mk-step-lead { margin-top: 0; }
.mk-s3 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-28) var(--space-44); align-items: start; margin-top: var(--space-28); }
@media (max-width: 1080px) { .mk-s3 { grid-template-columns: minmax(0, 1fr); } }
/* 電腦第 3 步：紅色「複製」放在右欄、緊貼在它複製的那張單子上面；左欄是「建議先看一下」與到 Gemini 三小步（E 第 2 輪評審品味建議 5：原本複製鈕在左欄，
   被複製的內容在右欄、低 55px 才開始，右欄上面一段是空的）。.mk-s3 拆開（display: contents），兩欄的東西排進同一張格線；平板、手機照原本的上下順序 */
@media (min-width: 1081px) {
  /* 「建議先看一下」跨兩列：右欄的單子緊接在複製鈕下面開始（不用等左欄的建議排完）；左欄的三小步接在建議下面。最後一列是彈性列，多出來的高度都放那裡 */
  #mk-step-3 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: var(--space-44); align-items: start;
    grid-template-areas: "head head" "warn copy" "warn slip" "main slip" "after after" "try try" "nav nav"; }
  #mk-step-3:not(:has(> .mk-warnbox)) { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head" "main copy" "main slip" "after after" "try try" "nav nav"; }   /* 沒有建議時，左欄從大標下面就開始 */
  #mk-step-3 > .mk-step-head { grid-area: head; }
  #mk-step-3 > .mk-warnbox { grid-area: warn; }
  #mk-step-3 > .mk-copybox { grid-area: copy; }
  #mk-step-3 > .mk-s3 { display: contents; }
  #mk-step-3 .mk-s3-main { grid-area: main; margin-top: var(--space-28); }
  #mk-step-3 .mk-s3-slip { grid-area: slip; margin-top: var(--space-18); }
  #mk-step-3 > .mk-after { grid-area: after; }
  #mk-step-3 > .mk-try { grid-area: try; }
  #mk-step-3 > .mk-nav { grid-area: nav; }
}
/* 到 Gemini 三步圖解（新元件）：自己畫的線稿（一般的輸入框與選單，不畫 Google 的畫面）＋一句做法 */
.mk-go { list-style: none; margin: 0; padding: 0; display: grid; }
.mk-go-i { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-18); align-items: start; padding-block: var(--space-18); border-top: 1px solid var(--line); }
.mk-go-i:first-child { border-top: 0; padding-top: 0; }
/* 640 以下：線稿放在小標上面、說明用滿整欄（E 第 2 輪評審 M4：線稿欄佔 30% 寬，320 寬說明一行只剩 10 個字、一段 20 行）。線稿維持原本手機的 112px 寬 */
@media (max-width: 640px) { .mk-go-i { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } .mk-go-i > .mk-art { width: 112px; } }
.mk-art { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); }
.mk-art .mk-hl { fill: var(--amber); stroke: none; }
.mk-art .mk-on { stroke: var(--on-amber); }
.mk-go-t { display: grid; gap: var(--space-8); justify-items: start; }
.mk-go-t h3 { display: flex; align-items: baseline; gap: var(--space-10); font: 700 22px/1.3 var(--font-body); }   /* item-title */
.mk-go-n { font: 800 26px/1 var(--font-display); color: var(--ink); }   /* chord-name 字級的數字。小事修正 10-26（網站主人「都照建議」）：原本 red-ink；紅色只給錄音、正在播、每畫面一顆主按鈕（這一頁是「複製作曲要求」）→ 墨色，跟「主奏」同理 */
.mk-go-t p { font-size: 16px; line-height: 1.7; }
.mk-attach { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.mk-attach li, .mk-need li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.mk-attach li { font-weight: 700; }
.mk-attach .gl, .mk-need .gl { width: 20px; height: 20px; margin-top: calc(var(--space-6) / 2); color: var(--ink-2); }
/* 「到 Gemini 做歌要準備的」放在三小步前面（E 第 4 輪評審品味 6／第 3 輪品味 3：先講要準備什麼，再講怎麼做）；底下一條 line 跟第 1 小步隔開 */
.mk-need { padding-bottom: var(--space-18); border-bottom: 1px solid var(--line); display: grid; gap: var(--space-12); justify-items: start; }
.mk-need + .mk-go > .mk-go-i:first-child { padding-top: var(--space-18); }
.mk-go-t .mk-go-what { margin-top: calc(var(--space-6) * -1); font-size: 15px; line-height: 1.5; color: var(--ink-2); }   /* 「創作音樂」＝Lyria：接起開頭說的名字（E 第 4 輪評審品味 4） */
.mk-faq dt .mk-faq-flag { display: flex; align-items: flex-start; gap: var(--space-6); margin-top: var(--space-4); font: 400 15px/1.5 var(--font-body); color: var(--ink-2); }   /* 宣傳類場合：「用之前先看這一題」（E 第 4 輪評審 M4-2 甲案） */
.mk-faq-flag .gl { flex: none; width: 18px; height: 18px; margin-top: var(--space-2); }
.mk-need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-10); }
.mk-need li { font-size: 16px; line-height: 1.7; }
.mk-after { margin-top: var(--space-44); }
.mk-faq { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-44); }
@media (max-width: 760px) { .mk-faq { grid-template-columns: minmax(0, 1fr); } }
.mk-faq > div { padding-block: var(--space-14); border-top: 1px solid var(--line); }
.mk-rules { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }   /* 「可以公開、商用嗎」：連到 Google 三份原文（10-24 使用者：以 Google 的規定為準，不自己寫死） */
.mk-faq dd .mk-hint { display: block; margin-top: var(--space-6); }
.mk-faq dt { font: 700 17px/1.4 var(--font-body); }
.mk-faq dd { margin: var(--space-6) 0 0; font-size: 16px; line-height: 1.7; }
.mk-try { margin-top: var(--space-44); display: grid; gap: var(--space-12); }

/* ---------- 就地確認（新元件）：問句＋兩顆鈕，就出現在剛按的地方下面；預設停在「不要」 ---------- */
.mk-askbox { grid-column: 1 / -1; margin-top: var(--space-10); padding-top: var(--space-12); border-top: 2px solid var(--ink); display: grid; gap: var(--space-10); justify-items: start; }
.mk-askbox p { font: 700 16px/1.6 var(--font-body); }

/* ---------- 樣稿註記（正式網站不會有）：預設收起來 ---------- */
details.mock-notes { margin-top: var(--space-48); padding-block: var(--space-14) var(--space-24); border-top: 1px dashed var(--line-strong); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
details.mock-notes > summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: var(--tap-min); display: flex; align-items: center; }
details.mock-notes ul { margin: var(--space-8) 0 0; padding-left: var(--space-18); display: grid; gap: var(--space-6); }
@media print { .mk-stepbar, .mk-play, details.mock-notes { display: none !important; } }