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