/* 叮叮点歌 dingsong.ai 操作样稿 v1⁠·共用外框的样式（2026-10-21）
   加载顺序：assets/ds/tokens.css → assets/ds/bundle.css → 这支 → 各页自己的 css。
   只用设计系统的 token：颜色 var(--…)、间距 var(--space-…)、圆角 var(--radius-…)；字级只用字级表里有的值（后面注明是哪一级）。
   标“照抄 bundle.css”的区块是设计系统原本的值（例如手机底部菜单），只是多套用到别的宽度。 */

/* ---------- 卷动与焦点 ---------- */
/* 页眉黏在最上面：用键盘或锚点移过去的东西，不能被页眉（或手机底部五台）盖住 */
html { scroll-padding-top: calc(var(--header-height) + var(--space-12)); }
@media (max-width: 760px) { html { scroll-padding-bottom: calc(var(--space-52) + var(--space-12) + env(safe-area-inset-bottom, 0px)); } }
main[tabindex="-1"]:focus { outline: none; }   /* “跳到主要内容”的落点本身不是可以按的东西，不画焦点框 */

/* ---------- 版心左右留白 ---------- */
/* E 第 2 轮评审 H3：768～1180 宽左右只留 16px（bundle.css 的 .wrap 写死），平板、笔记本电脑看起来贴边。留白随宽度从 16px 加到 48px；
   最大宽跟着加，内容栏最宽仍是 1148px（＝原本 1180 减两边 16），大屏幕版面不变 */
:root { --wrap-pad: clamp(var(--space-16), 4vw, var(--space-48)); }
.wrap { max-width: calc(1148px + 2 * var(--wrap-pad)); padding-left: max(var(--wrap-pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--wrap-pad), env(safe-area-inset-right, 0px)); }

/* ---------- 页眉 ---------- */
.site-head[data-shell="head"]:empty { min-height: calc(var(--header-height) + 1px); }   /* 程序画上去之前先占好高度，画面不跳 */
.logo { flex: none; }
.logo-svg { display: block; fill: var(--red); }   /* 日夜自己换红（浅色 #D60017、深色 #E0182F 都在 token 里） */

/* 语言钮（新组件）：ToolButton 的样子＋地球图标＋现在的语言；按了往下打开一张深色小面板，三种语言各用自己的写法 */
.lang { position: relative; }
.lang-btn { white-space: nowrap; }
@media (min-width: 760px) and (max-width: 899px) { .lang-btn > span[lang] { display: none; } }   /* 10-25 评审 H3：768～783 宽页眉右边只剩 1～9px；这段宽度语言钮只留地球图标（读屏照念“选择语言”） */
@media (pointer: coarse) { .tool { min-height: var(--tap-min); } }   /* 触摸：页眉语言、日夜钮补到 44px 高 */   /* 四语以后写“繁體中文”，768px 页眉挤时会断成“繁体／中文”（shell.js 也不在 .tool 里插 <wbr>） */
.lang-btn .caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang-btn[aria-expanded="true"] { border-color: var(--ink); }
.lang-btn[aria-expanded="true"] .caret { transform: translateY(2px) rotate(225deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + var(--space-8)); z-index: 40; margin: 0; padding: var(--space-6); list-style: none; min-width: 10.5em; display: grid; gap: var(--space-4); background: var(--glass); color: var(--glass-ink); border-radius: var(--radius-14); box-shadow: inset 0 0 0 1.5px var(--glass-edge); }   /* glass-edge 内框：落在收音机的深色玻璃上也分得出边（对 glass 日 3.16／夜 3.20:1、对 bg 日 4.46／夜 3.03:1） */
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--tap-min); padding: 0 var(--space-14); border-radius: var(--radius-pill); color: var(--glass-ink); text-decoration: none; font: 700 15px/1 var(--font-body); }   /* ui-label */
.lang-menu a[lang="en"] { font-family: "Source Sans 3", var(--font-body-en); }   /* 10-27 W6b：繁中简中页也切了“English”那几个字的 Source Sans 3 */
.lang-menu a[lang="ja"] { font-family: var(--font-body-ja); }
.lang-menu a[lang="zh-Hans"] { font-family: var(--font-body-sc); }
/* 简中页（2026-10-24）：整页换 Noto Sans SC（繁中字体没有简体字，会借别的字体、粗细不一）；菜单里的“繁體中文”照用繁中字体 */
html[lang="zh-Hans"] { --font-body: var(--font-body-sc); --font-display: "Big Shoulders Display", var(--font-body-sc); --font-mono: "Space Mono", var(--font-body-sc); }   /* mono 里夹的中文（“FM 114.8⁠·背景音乐”）：10-25 评审量到简中页画成宋体 */
/* 繁中字体没有的字（10-26 第 4 轮评审 N7：出处总表《春が来た》的“来”、《…読本》的“読”、Bądarzewska 的 ą、Dvořák 的 ř、op. 101 č. 7 的 č）：
   先借网站已经放的简中字体，再借拉丁扩充字体（tools/fonts.py 的 DS Sans Latin），不要掉到系统字体；只有页面真的用到这些字才会下载 */
html:root { --font-body-sc: "Noto Sans SC", "DS Sans Latin", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body-tc: "Noto Sans TC", "Noto Sans SC", "DS Sans Latin", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }   /* 繁中这一组：繁中页内文、英日文页上的中文歌名共用 */
html:root:not([lang="zh-Hans"]):not([lang="en"]):not([lang="ja"]) { --font-body: var(--font-body-tc); }   /* 繁中页；简中页的 --font-body 由上一条换成 --font-body-sc，英日文页看下面两条 */
/* 英日文页（10-27 英日文接线；原本上一条也管到英日文页、权重又比 bundle.css 的 html[lang="en"]／[lang="ja"] 高，英日文页整页用繁中字体排：
   日文汉字画成繁中字形、英文的 ’ “ ” 画成全角）。
   英文：内文用本站自己放的 Source Sans 3（主控决定 #47；字体文件由 tools/fonts.py 切，字族名 "Source Sans 3"），后面接设计系统 body-en 的系统字体。
   日文：内文 Noto Sans JP（设计系统 body-ja）；频率数字、等宽字里夹的假名（“FM 114.8⁠·BGM”）也改借日文字型（tokens 的 display、mono 后备是繁中字体） */
html:root[lang="en"] { --font-body: "Source Sans 3", var(--font-body-en); }
html:root[lang="ja"] { --font-body: var(--font-body-ja); --font-display: "Big Shoulders Display", var(--font-body-ja); --font-mono: "Space Mono", var(--font-body-ja); }
/* 英日文页上标成中文的歌名、原词（lang="zh-Hant-TW"）指回繁中字体：日文页不然会用日文字形画中文。
   字体变量用一般权重（里面的组件写 var(--font-…) 就拿到繁中这一组）；font-family 本身用 :where() 不加权重，组件自己的字体（例如等宽字）照样算数 */
html:root:is([lang="en"], [lang="ja"]) [lang^="zh-Hant"] { --font-body: var(--font-body-tc); --font-display: "Big Shoulders Display", var(--font-body-tc); --font-mono: "Space Mono", var(--font-body-tc); }
:where(html:is([lang="en"], [lang="ja"]) [lang^="zh-Hant"]) { font-family: var(--font-body); }
/* 英日文页不用 text-wrap 的 pretty／balance（10-27 主控决定）：设计系统 bundle.css:19 的 p, li { text-wrap: pretty }（与各页的 balance）在 Chrome 排版卡死整页——
   日文出处总表 320、375 宽（W6a 实测：关掉 pretty 3 秒载完，不关 4 分钟没反应；关掉断词、keep-all 都没用）、英文作曲页 375、1024 宽（W6b 在有 Source Sans 3 的 dist 量到）。
   只改 text-wrap-style（pretty／balance → 一般换行），不用 text-wrap 简写：简写会连 text-wrap-mode 一起盖掉，white-space: nowrap 的地方（.nw、按钮）会变成可以换行。
   繁中、简中照旧；日文最后一行不落单改由 shell.js 的词组规则处理 */
html:root:is([lang="en"], [lang="ja"]) * { text-wrap-style: auto !important; }
html[lang="zh-Hans"] .lang-menu a[lang="zh-Hant-TW"] { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.lang-menu a:hover { background: var(--glass-2); }
.lang-menu a[aria-current] .gl { color: var(--glass-red-ink); }
.lang-menu :focus-visible { outline-color: var(--glass-red-ink); }   /* 深色面板里的焦点框（设计系统第 4 版规则） */

/* 日夜钮：761～860px 宽时页眉放不下，只留月亮（字留给读屏） */
@media (min-width: 761px) and (max-width: 860px) {
  .theme-btn .theme-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 触摸设备不分宽度，工具钮都至少 44px 高（设计系统只写在 640px 以下） */
@media (pointer: coarse) { .tool { min-height: var(--tap-min); padding-inline: var(--space-14); } }
/* 平板宽（761～1099）就算回报有鼠标，也可能是 iPad 接触摸板、二合一笔记本电脑：语言、日夜钮补到 44px 高（10-26 小事修正；第 5、6 轮评审量到 32px）。
   只加高、不加宽（左右内距照旧），页眉 66px 放得下，刻度与两颗钮的距离不变；1100 以上是电脑，照设计系统 32px */
@media (min-width: 761px) and (max-width: 1099px) { .tool { min-height: var(--tap-min); } }

/* ---------- 手机底部五台 ---------- */
/* 设计系统：760px 以下页眉刻度藏起来、640px 以下才出现底部菜单 → 641～760px 没有任何菜单。这里把底部菜单延伸到 760px。
   以下照抄 bundle.css 640px 区块里的 .tabbar 规则，数值不变 */
@media (min-width: 641px) and (max-width: 760px) {
  .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); }
}
/* 底部五台的字放大一级（10-25 网站主人照建议，待决清单第 3 条：长辈看得清楚；设计系统原本频率 10px、台名 13px）。320 宽每格 64px，“背景音乐”4 字 56px 放得下 */
@media (max-width: 760px) { .tabbar a { font-size: 14px; } .tabbar a .f { font-size: 12px; } }
/* “选中”的胶囊与选项：琥珀底对页面底只有 2.33:1（第 3～5 轮评审），外框改用墨色，看得出选了哪一个；琥珀底照旧（网站主人 10-26“都照你建议处理”）。
   前面加 html 提高优先度：bgm.css 等各页的同一条规则排在后面 */
html .chip[aria-pressed="true"], html .chip[aria-current="true"], html .opt[aria-pressed="true"] { border-color: var(--ink); }
/* 外部链接后面的 ↗（shell.js extLinks：文字页本文、页脚姐妹站） */
.ext { margin-left: var(--space-2); }   /* 一般行内字，不用 inline-block：整块的行内元素前后都能换行，↗ 会单独掉到行首、后面的“、”也跟着到行首（第 5 轮评审必修 4） */
/* 页眉五台的频率、收音机刻度数字 11px → 12px（10-26 第 4 轮评审品味：设计系统里最小的字，跟手机底部五台的频率同一级） */
.band-nav a .f, .dial-scale .num { font-size: 12px; }
/* 320～339 宽：“FM 114.8”12px 要 57.6px、格子只剩 57px，断成两行、五格不齐（第 4 轮评审 N1）→ 不换行、字距收一点、格子左右内距拿掉，不动 12px */
@media (max-width: 340px) { .tabbar a { padding-inline: 0; } .tabbar a .f { white-space: nowrap; letter-spacing: -.04em; } }
/* 日文：“ものがたり”5 个假名 14px 要 70px，320 宽格子只有 62px、375 宽 68px，断成“ものがた／り”（10-27 英日文接线实测）→
   台名一律不换行；400 宽以下小一级（caption 13px）、字距收一点（400 宽以上格子 ≥72px，14px 放得下） */
html[lang="ja"] .tabbar a > span:last-child { white-space: nowrap; }
@media (max-width: 400px) { html[lang="ja"] .tabbar a > span:last-child { font-size: 13px; letter-spacing: -.04em; } }

/* ---------- 页脚三栏（新组件；照姐妹站共同规格：本站介绍与联系／姐妹站／本站） ---------- */
footer[data-shell="foot"] { padding-block: var(--space-48); }
/* 让开底部五台：五台高 56px（48＋上下 4）＋安全区，再留 24px；页面底部另有固定列（--page-bar-h）也一起让开。
   原本写死 120px（10-26 小事修正：手机页脚太长，这里省 32px） */
@media (max-width: 760px) { footer[data-shell="foot"] { padding-bottom: calc(var(--space-52) + var(--space-12) + var(--space-24) + var(--page-bar-h, 0px) + env(safe-area-inset-bottom, 0px)); } }
footer[data-shell="foot"] .wrap { display: block; }
/* 三栏（901 以上）：第一栏至少放得下“联系：邮箱＋复制”一整行（10-26 小事修正：1024 宽第一栏 276px，“复制”被挤到下一行）；
   用内容量出来的宽（min-content＋不换行），英文、日文的“Contact:”“お問い合わせ：”长短不同也跟着变 */
.foot-cols { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-28) var(--space-44); }
@media (min-width: 901px) { .foot-col p.foot-mail { flex-wrap: nowrap; white-space: nowrap; } }
/* 360 宽以下：“联系：邮箱＋复制”一行要 291px、320 宽只有 288px，“复制”掉到下一行 → 两个间隔 10 → 6px（10-26 追加修正；按钮大小不动） */
@media (max-width: 360px) { .foot-col p.foot-mail { gap: var(--space-6); } }   /* 下面 .foot-mail 原本的规则排在后面，这里加 .foot-col p 提高优先度 */
@media (max-width: 900px) { .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); } }
/* 手机页脚缩短（10-26 小事修正：320 宽 950px、375 宽 877px，比一屏还长）：姐妹站四个排成两栏（站名＋原本的说明句都留着），
   一个站从一整行变半行；说明句、CC0 出处、CY Lab、邮箱、更新日期一个字都没拿掉 */
@media (max-width: 640px) {
  footer[data-shell="foot"] { padding-top: var(--space-28); }   /* 跟文字页手机的上下留白同一级（doc.css .doc） */
  .foot-sis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-16); }
}
.foot-h { font: 700 15px/1.25 var(--font-body); color: var(--ink); margin: 0 0 var(--space-10); }   /* ui-label */
.foot-col p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.foot-col p + p { margin-top: var(--space-6); }
.foot-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); margin-top: var(--space-10); }
.foot-col p.foot-mail { margin-top: var(--space-10); }
.foot-mail .mail { color: var(--ink); overflow-wrap: anywhere; }   /* 邮箱用内文字型，跟文字页内文一致（10-25 第 2 轮评审：同一屏两种字体；设计规格 mono 只给频率与时间） */
.foot-sis, .foot-links { list-style: none; margin: 0; padding: 0; }
.foot-sis { display: grid; gap: var(--space-12); }
.foot-links a { font-weight: 700; color: var(--red-ink); text-underline-offset: 3px; }
/* 姐妹站：站名＋说明句整个是一个链接（shell.js，10-26 小事修正），样子照旧：站名红字粗体底线、说明句灰字不画底线 */
.foot-sis a.sis { display: block; color: var(--ink-2); text-decoration: none; }
.foot-sis .sis-n { font-weight: 700; color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .foot-sis a.sis:hover .sis-n { text-decoration-thickness: 2px; } }
.foot-sis small { display: block; margin-top: var(--space-4); font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-18); margin-bottom: var(--space-10); font-size: 14px; }
/* 找不到网址的页（404.html，施工 1） */
/* 滑过的样子（10-25 界面规范审查 M4、M5：一般 .btn、录音钮、纯文字链接停上去完全没变化；设计系统只有 btn-main／btn-ghost 有）。只给有鼠标的设备 */
@media (hover: hover) {
  .btn:not(.btn-main):not(.btn-ghost):not(:disabled):hover { box-shadow: 0 0 0 3px var(--line-strong); }
  a:not([class]):hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
.nf { padding-block: var(--space-48); }
.nf h1 { margin: 0 0 var(--space-16); font-size: clamp(34px, 4.4vw, 52px); }   /* 10-25 评审：标题与引言原本 0px（文字页是 16px） */
@media (max-width: 640px) { .nf h1 { font-size: 34px; } }   /* 手机各页页名统一 34px */
/* 10-26 第 4 轮评审（上轮就提）：404 做成“这个频率没有信号”——一条静止的刻度、指针停在两台中间（不加动态）；
   五台一排（手机 3＋2，不会剩一颗单独一行），“回首页”是这一页唯一的红色主按钮、单独一行 */
.nf .nf-kick { margin: 0 0 var(--space-12); font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }
.nf-dial { position: relative; max-width: 40em; height: var(--space-44); margin: var(--space-28) 0 var(--space-24); border-bottom: 1px solid var(--line-strong);
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px var(--space-12)) bottom / 100% 40% no-repeat; }
.nf-needle { position: absolute; left: 58%; top: 0; bottom: 0; width: 2px; background: var(--red); }   /* FM 113.8：108～118 的 58%，落在 112.8 与 114.8 之间（10-28 频率移到广播频带外） */
/* 刻度标出五台（10-26 小事修正；第 5、6 轮评审品味）：频率跟首页收音机、页眉、底部五台同一组，位置照 108～118 换算（(频率−108)÷10；10-28 频率移到广播频带外）；
   一根直线＋上面的频率字，不动、不加动画。第一台在 8%，置中的字不超出刻度（320 宽也是） */
.nf-mark { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.nf-mark::after { content: ""; flex: 1; width: 2px; margin-top: var(--space-4); background: var(--ink-2); }
.nf-mark:nth-child(1) { left: 8%; }   /* 108.8 */
.nf-mark:nth-child(2) { left: 28%; }   /* 110.8 */
.nf-mark:nth-child(3) { left: 48%; }   /* 112.8 */
.nf-mark:nth-child(4) { left: 68%; }   /* 114.8 */
.nf-mark:nth-child(5) { left: 88%; }   /* 116.8 */
.nf-st { list-style: none; max-width: 40em; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-12); }
.nf-st .btn { display: grid; justify-items: center; gap: var(--space-4); width: 100%; height: auto; min-height: var(--tap-min); padding: var(--space-10) var(--space-4); text-align: center; white-space: nowrap; }   /* 台名跟底部五台同一个短名（AI 作曲）；左右内距小，320 宽 3＋2 也放得下（10-26 第 5 轮评审 M1：原本字超出框、“AI 作曲工作室”断两行） */
.nf-st small { font: 500 12px/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 360px) { .nf-st .btn { font-size: 15px; } }
.nf-home { margin: var(--space-24) 0 0; }
@media (max-width: 700px) { .nf-st { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nf-st li { grid-column: span 2; } .nf-st li:nth-child(n+4) { grid-column: span 3; } }
/* 英日文 404（10-27 英日文接线实测）：台名照翻译表是全名（Background Music 135px、音楽ものがたり 109px），比繁中的短名长，
   3 栏时（320 宽每格 88px）撑破按钮、整页 327～378px → 台名可以换行；420 宽以下改两栏、最后一颗占一整列（不会剩一颗单独缩在一格） */
html:is([lang="en"], [lang="ja"]) .nf-st .btn { white-space: normal; }
@media (max-width: 420px) {
  html:is([lang="en"], [lang="ja"]) .nf-st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:is([lang="en"], [lang="ja"]) .nf-st li, html:is([lang="en"], [lang="ja"]) .nf-st li:nth-child(n+4) { grid-column: auto; }
  html:is([lang="en"], [lang="ja"]) .nf-st li:last-child { grid-column: 1 / -1; }
}
.foot-mock {margin-top: var(--space-28); padding-top: var(--space-14); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-2); }   /* caption */
@media (pointer: coarse) {
  .foot-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
  .foot-sis a.sis { min-height: var(--tap-min); }   /* 站名＋说明句一起算，本来就超过 44px */
  .copy { min-height: var(--tap-min); padding-inline: var(--space-16); }
}

/* ---------- 首页右侧姐妹站小标签：不放（10-25 网站主人照建议“只放页脚”，待决清单第 1 条；页眉已经很挤，姐妹站不是读者来这里要找的，页脚三栏就有） ---------- */
.sistabs { display: none; }
/* ---------- 提示列：两种语言各一行（点 English 时：中文一行＋英文一行） ---------- */
#toast .toast-msg { display: grid; gap: var(--space-4); padding-block: var(--space-4); }
@media print { .sistabs, .tabbar, #toast { display: none !important; } }

/* ---------- 10-22 主控：各页共用的补充 ---------- */
/* 页面底部多一条固定列（播放器、步骤列、三颗钮）时，页面在 :root 设 --page-bar-h，提示列与卷动留白一起让开；底部太忙的页可设 data-toast="top" 让提示列放上面 */
#toast { bottom: calc(86px + var(--page-bar-h, 0px) + env(safe-area-inset-bottom, 0px)); }
:root[data-toast="top"] #toast { top: calc(var(--header-height) + var(--space-12)); bottom: auto; }
@media (max-width: 760px) { html { scroll-padding-bottom: calc(var(--space-52) + var(--space-12) + var(--page-bar-h, 0px) + env(safe-area-inset-bottom, 0px)); } }
/* 儿童模式（页面在 :root 设 data-kids）：页眉与底部五台不出现 AI 作曲工作室（规划书 v2 §2.2 儿童模块红线） */
:root[data-kids] .band-nav a[href*="make/"], :root[data-kids] .tabbar a[href*="make/"] { display: none; }
:root[data-kids] .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root[data-kids] .band-nav .f, :root[data-kids] .tabbar .f { display: none; }   /* 儿童模式不显示 FM 频率数字（小朋友读者测试：看不懂），只留站名 */
/* 胶囊链接钮：设计系统 .set-more 的样子，但不分宽度都显示（.set-more 在 641px 以上是隐藏的）；“文字＋箭头”的链接一律用它 */
:where(.pill-link) { 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; cursor: pointer; }
@media (hover: hover) { :where(.pill-link):hover { border-color: var(--ink); } }
:where(.pill-link) .gl { width: 16px; height: 16px; }
/* 样稿注记（正式网站不会有）：各页自己的样式照样优先 */
:where(.mock-notes) { margin-top: var(--space-48); padding-block: var(--space-12); border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: 14px; line-height: 1.7; }
:where(.mock-notes) > summary { display: flex; align-items: center; min-height: var(--tap-min); color: var(--ink); font-weight: 700; cursor: pointer; }
@media print { :where(.mock-notes) { display: none; } }